Persist element(s) for client view construction

[pxwise]

• I'm submitting a ...
• bug report
• feature request
• support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this Issue?
• express-engine
• grunt-prerender
• gulp-prerender
• hapi-engine
• universal-next
• universal
• webpack-prerender
• Do you want to request a feature or report a bug?

feature

• What is the current behavior?

Server rendered DOM may be transformed before the client bootstraps by 3rd party scripts or edge computing. Browser currently displaces this transformed DOM upon client side bootstrap.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.
  n/a
• What is the expected behavior?

Server rendered DOM elements need to be extracted from the server <app> component and placed in the client <app> component upon client bootstrap.

There needs to be a way to specify which elements / components should be transcluded into the client bootstrapped <app> from the server side <app>.

• What is the motivation / use case for changing the behavior?

I have 3 use cases for this feature request:

1. Ads - 3rd party js finds ads markup in the server rendered DOM and injects any arbitrary elements (iframes, video, img, div soup) and additional scripts into the document. This needs to occur as fast as possible, so sometimes the ads will inject into the server rendered DOM before client has bootstrapped. When client bootstraps, the injected ad content will appear wiped out. Maintaining ad rendering capability from our 3rd parties is a firm requirement for us using universal.

2. Edge compute processed DOM - server generated DOM may be transformed at the edge before it arrives in the browser with important injected values such as a a user's browser, screen resolution and geolocation. If this edge compute processed markup is rendered in client it will appear as though unprocessed and will also be wiped out.

3. Static, inert text copy in a server rendered component - Always good to not spend cpu, ram and battery if you can help it. If possible, forklift the server rendered DOM into the same position in the client view.

• Please tell us about your environment:
• Angular version: 2.0.0
• Browser: all
• Language: all
• OS: all
• Platform: NodeJs
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[jeffbcross]

The @angular/app-shell library does exactly this: https://github.com/angular/mobile-toolkit/tree/master/app-shell

I just noticed the docs are out of date, the library now ships with a module:

import {AppShellModule} from '@angular/app-shell';

And then when including the module server side, include the module as AppShellModule.prerender(), and client-side is AppShellModule.runtime().

Then you can use the directives *shellRender to render components only on the server and *shellNoRender to render components only at runtime.

We may generalize this lib later to make it less App-Shell-specific.

[pxwise]

Another approach referenced in #533 (comment) with a gist demoing how to transfer server rendered DOM into client app: https://gist.github.com/gdi2290/a5bc5b3d3dd64f88e5c660f6a2df75d6

[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.}