Pages with lazy loaded modules flickers when angular server side rendered markup is bootstrapped

[rohit-nair]

Description

On apps with server side rendering (angular universal) and lazy loaded modules, requesting pages with lazy loaded components exhibit flicker. This is potentially happening as the fix done to address this bug hasn't been ported to JSS's package.

Order of events appears as follows:

• Initial response with SSR markup is received.
• All the style elements from SSR, style[ng-transition], are removed.
• The page is effectively being re-rendered client side causing the page/component to flicker.
• The flicker duration is dependent on the bundle size of lazy loaded module. For heavier modules, it takes a bit for the bundle to be downloaded and parsed causing extended period of white screen.

Expected behavior

On apps with server side rendering and lazily loaded modules, when landing on pages with lazy loaded components, ie. requesting pages with lazy loaded components, the existing renderings are hydrated from state transfer and are not rendered again client side.

Steps To Reproduce

1. Clone sample angular jss app.
2. Make some modules lazy loaded
3. Launch site and put a breakpoint in JssComponentFactoryService.prototype.getComponent and notice behavior on page.

Possible Fix

Possible fix is to port what was done in angular core project.

Your Environment

• Sitecore Version: 9.0
• JSS Version: 11
• Browser Name and version: Chrome 4.0.3729.157 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Desktop
• Link to your project (if available):

Angular CLI: 7.2.4
Node: 10.15.3
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.4
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.2.4
@angular-devkit/schematics        7.2.4
@angular/cli                      7.2.4
@ngtools/webpack                  7.3.9
@schematics/angular               7.2.4
@schematics/update                0.12.4
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Screenshots

Blank page during bootstrapping

Initial response from server has markup but the page doesn't as the component is being re-rendered.

This is with transfer state api implementation.

[spike1292]

We used https://github.com/angular/preboot to reduce the flickering. It's not perfect, you still need the following hack: https://github.com/angular/preboot/issues/75#issuecomment-421266570

You can see an example here: https://www.essent.nl/kennisbank

[rohit-nair]

That indeed appears to have fixed the issue. Although I'm still apprehensive of the hack. But overall it's a better than not having SSR or Lazy Loading.