While working on my Angular application, I've noticed a flicker when simulating a mid-tier mobile browser. It seems like Angular is not properly rehydrating the DOM when transitioning from Server to Browser, resulting in a full replace of the DOM.
This issue becomes more apparent when there are no changes or new data being pulled into the page. To mitigate this, I am focusing on preventing repeated API calls on the server side.
Given the size of the codebase, it's challenging to pinpoint any specific areas that may be relevant. If something crucial is missing, feel free to ask for clarification in the comments section.
The App Server Module looks like this:
import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { BrowserModule } from '@angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
BrowserModule.withServerTransition({ appId: 'api-example' }),
ServerModule,
ServerTransferStateModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
And here is the configuration for the App Module:
@NgModule({
imports: [
// List of modules and configurations
],
declarations: [AppComponent],
providers: [
// List of providers
],
bootstrap: [AppComponent],
})
export class AppModule {}
It's important to note that I am not utilizing a separate App Browser Module. Additionally, I'm not including
BrowserModule.withServerTransition({ appId: 'api-example'})BrowserTransferStateModule because doing so results in unwanted API calls and loss of CSS styles upon page reload in the browser.
To address the issue, I have delayed the bootstrapping process in my main.ts:
// Code snippet for delaying bootstrapping
In order to manage HTTP requests, an HTTP Interceptor is employed:
// Code snippet for HTTP Interceptor
I've encountered confusion regarding the behavior of transferState.get(), as logging the complete state works fine but retrieving specific items does not. This inconsistency is puzzling and needs further investigation.
Furthermore, when attempting to parse the transferred state using
JSON.parse(this.transferState.toJson())Lastly, the handling of API data retrieval within the Page component raises questions about potential causes of the issue and necessary information for resolution.
For more context and resources related to this problem, refer to the provided links for insights and possible solutions.