title: Angular ssr, page rerender issue
body: <p>I am new to Angular ssr, you can see code below</p>
  
  <p><strong>Issue</strong></p>
  
  <p>If I enter to client route directly, first it shows</p>
  
  <blockquote>
    <p><strong>Rendered by server</strong></p>
  </blockquote>
  
  <p>but quickly after that it rerenders page and shows:</p>
  
  <blockquote>
    <p><strong>Rendered by browser</strong></p>
  </blockquote>
  
  <p>I think I know why this happens, but to be sure can someone provide a good explanation? also, Can I somehow avoid this behavior and force browser to render html that comes from server? should I worry about this?</p>
  
  <p><strong>client.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: "client",
    template: "&lt;p&gt;Rendered by {{ renderer }}&lt;/p&gt;",
    styleUrls: ["./dumco.component.css"]
  })
  export class ClientComponent implements OnInit {
  
    renderer: string;
    bla: any = [];
  
    constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: any) {
      this.renderer = isPlatformBrowser(platformId) ? "Browser" : "Server";
    }
  }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { RouterModule, PreloadAllModules } from "@angular/router";
  import { AppComponent } from "./app.component";
  import { CompfComponent } from "./compf/compf.component"
  import { HomeComponent } from "./home/home.component"
  
  export const appRoutes = [
    {
      path: "",
      component: HomeComponent
    },
    {
      path: "comp",
      component: CompfComponent
    },
    {
      path: "client",
      loadChildren: () =&gt; import("./client/client.module").then(m =&gt; m.ClientModule),
      data: { title: "Static Data - Clients" }
    },
  ];
  
  // preloadingStrategy: PreloadAllModules,
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes, { onSameUrlNavigation: "reload", initialNavigation: 'enabled' })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from "@angular/common/http";
  
  import { AppRoutingModule } from "./app-routing.module"
  
  import { AppComponent } from './app.component';
  import { CompfComponent } from './compf/compf.component';
  import { HomeComponent } from './home/home.component';
  
  import { TransferHttpCacheModule } from "@nguniversal/common"
  
  @NgModule({
    declarations: [
      AppComponent,
      CompfComponent,
      HomeComponent
    ],
    imports: [
      HttpClientModule,
      TransferHttpCacheModule,
      BrowserModule.withServerTransition({ appId: 'serverApp' }),
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>app.server.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
  
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [
      AppModule,
      ServerModule,
      ServerTransferStateModule
    ],
    bootstrap: [AppComponent],
  })
  export class AppServerModule {}
  </code></pre>