Menu
Resources on server side rendering are scarce, in fact, I couldn't find anything that clearly explains how things actually work. I've seen some repos, tried to follow the code, but didn't manage to figure out the gist of it. If I run angular normally, I know basically what happens:
<html><body><my-app>...</my-app><SCRIPTS/></body></html>
<my-app> with all the goodies inside.For this app:
@Component({
selector: 'my-app'
template: `<p *ngFor="let i of items">{{ i }}</p>`,
})
export class AppComponent {
items = [1, 2, 3];
}
I can see inspect html (plunker) and see:
<my-app>
<!--template bindings={
"ng-reflect-ng-for-of": "1,2,3"
}-->
<p>1</p>
<p>2</p>
<p>3</p>
</my-app>
All clear so far! (:
But what happens with prerender? If I create a file like this:
<html>
<body>
<my-app>
<!--template bindings={
"ng-reflect-ng-for-of": "1,2,3"
}-->
<p>1</p>
<p>2</p>
<p>3</p>
</my-app>
<SCRIPTS/>
</body>
</html>
What will Angular do once scripts are loaded? Can I use this html instead of the first one? If someone understands how this process works, please share (; Any info about this stuff would be useful... Can I Copy outerHTML, and make that my "prerendered page"? ...like this:
If not, why? I'm looking for the essence of the process, an example that could be coded by hand and work...
507
A prerender service will intercept a page request to see if the user-agent viewing your site is a bot and if the user-agent is a bot, the prerender middleware will send a cached version of you site to show with all JavaScript, Images, etc are rendered statically.
When you Pre-render, After Effects will render the selected comp elements as a lossless movie and automatically replace them with the rendered file in your comp, often saving you significant rendering time for the final output.
Prerendering is a feature in Chrome to improve user-visible page load times. Prerendering is triggered by <link rel="prerender"> elements in referring pages.
The Basic plan is free and includes 1,000 renders per month, with a cache interval between 3 and 90 days. This plan does not incur overcharges. Once you reach the limit, we will not render more pages until your next billing period. To optimize this plan for more pages, you can have 1,000 pages rendered every 30 days.
With server-side rendering the page gets rendered twice: on the server, so you can see the rendered view very early, then on the client - after the app is loaded.
input box before the app is loaded, the keystrokes will be replayed by preboot.complete() command after the client-rendered view replaces the server-rendered one.Your questions:
What will Angular do once scripts are loaded?
Your app is bootstrapped normally, the contents of the <my-app></my-app> tag is replaced by the client-rendered view.
Can I Copy outerHTML, and make that my "prerendered page"?
Yes. However, using the angular-universal module instead is preferable, so you can dynamically render the view behind any of your routes.
As for the sample, here is the Angular 2 Universal Starter which is a sample app that demonstrates the universal thing in action. Play with it:
change the string 'This was rendered from the server!' in the dist/server/index.js to see it's reverted back when the app is loaded. Which means that statement becomes a lie after the client view is rendered.
enable preboot and postpone the preboot.complete() to see it in action (type something into the input box):
src/main.node.ts
let config: ExpressEngineConfig = {
// ...
preboot: { appRoot: 'app' } // your top level app component selector
};
src/client.ts
ngApp()
.then(function() {
setTimeout(function() {
preboot.complete();
}, 5000);
});
Here the simple DEMO of statically served "pre-rendered" view with preboot on the client. There is a 5 seconds delay before the app is bootstrapped to see the preboot in action.
I'm no angular2 expert, so, please, correct me if I am wrong. I base my judgement upon reading the following resources:
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
