SSR/Universal: styles flicker on lazy-load module rendering

[jbogarthyde]

📚 Docs or angular.io bug report

Description

Universal apps are reported to flicker when lazy-loaded modules are initiated from the server-side. The doc should provide info on how to avoid this problem.

It has to do with how bootstrap and routing interact, causing new styles to be swapped in after initial rendering.
There seem to be several contributing factors, which are still being investigated.

• Routing config has a default value for InitialNavigation that was incorrectly doc'd. It defaults to legacy_enabled, needs to be set to enabled. See Correct default in API doc for Router ExtraOptions.initialNavigation #32702, docs(router): make InitialNavigation part of the public API #32707

• Comments after Using platform server, lazy loaded component flickers as the browser renders the application #15716 (comment) indicate that just adding initalNavigation: 'enabled' to the Router options is not sufficient.
  Cannot find a way to achieve a smooth transition to client app universal#1184 details a lot of the confusion around this and suggests areas where the docs need to be improved.

🔬 Minimal Reproduction

• The Preboot library has a similar issue and a reproduction that shows that both Preboot and initalNavigation: 'enabled' are not sufficient: Big FOUC as server side styles removed before the switch to client side preboot#75

From @Splaktar: It looks like there is still a root issue that needs to be fixed.

What's the affected URL?**

https://angular.io/guide/universal

[rockument69]

@jbogarthyde : Perhaps you can add a comment on this. As I understand it, you have a closed PR that addresses this issue: 32702. There are also open issues in angular-core: 75 and 1184 that the doc team can't address. Should we mark this for engineering input?

[Splaktar]

PR #32702 and PR #32707 are related, but do not address this issue.

There is still no content in the Universal Guide about a FOUC (Flash of Unstyled Content) or flickering on page load, nor is there any guidance on lazy loaded modules.

This is already labeled as needing engineering input and that is still the state. In the community, there are no clear best practices here and ideally the Angular team (especially with the work on GSX) should hopefully be able to distill their knowledge (and possibly provide examples) into some best practices that the community can reference (given the caveat that all apps are not created equal).

Also of note, this is an issue that nearly all production-grade Universal apps need to investigate, debug, and troubleshoot. Some guidance here would be very impactful.

[tskweres]

SSR flickers, any solutions out there?

[Splaktar]

SSR flickers, any solutions out there?

There is no single solution that works for every app, but the primary set of solutions that can be used are all linked from this issue (and the issues linked within those).

[arminops]

Guys. My problem solved with 2 solutions:

Disabling lazyloading and also with loadChildren direct importing module.
loadingChildren: () => AuthModule. No flickering

I removed initialNavigation (Also Lazyloading enabled) - No flickering

How removing initialNavigation affects SSR?

#23427

[adrian-marcelo-gallardo]

In my case I solved the issue by configuring initialNavigation: 'enabledBlocking', as documented in: https://angular.io/api/router/InitialNavigation

[gitalvininfo]

@adrian-marcelo-gallardo I'm on Angular 10, initialNavigation: 'enabledBlocking' is not defined.

This issue still exist, in my case I have a landing page when first visit, landing page is visible for about 100ms, it is really bad ux for first time visitors of the app.

Already tried solutions like Transferstate but in my case does not meet my expectations to solve the issue. My landing page do not have any XHR request.

I also tried the TransferHttpCacheModule, I notice that first visit, sometimes it loads correctly without the glimpse of landing page, and sometimes it lessens the flicker amount of time for about 20ms but still I can see a glimpse of my landing page, after that it somehow fix my issue, but when I clear my cache, it returns back to previous state which the landing page is visible for about 20ms.

Also tried Preboot as what others is suggesting, but it is not suitable for my app, I have a mat-progress-spinner which acts as loading, when preboot is enabled and I hit F5/refresh my loading icon freezes for a while, it does not animate, which I think is very ugly and after about 1sec it goes back to normal state (app is working as usual like normal angular app).

I'm actually stuck here and I can't just leave it as it is.

[Parsa-Sedigh]

Angular 11.2 and using initialNavigation: 'enabled' solved the flickering effect for me

[alan-agius4]

Closing as this is documented in https://angular.io/api/router/InitialNavigation

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}