Konstantin Malikov
Angular & .net developer. Participating in growing Angular Community. Sharing knowledges. https://www.linkedin.com/in/konstantin-malikov-56b1681a2/
Prerender it easily
insights covering & fast integration.
Ah, another Angular 9 feature everyone knows about 🤫
Konstantin Malikov
Angular Workshop
Angular Minsk
Participant:
Angular Belarus
You'll know this, but let me remind...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular NYC conf !</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="center logo">
<img width="128" src="assets/images/logos/logo-full.png">
</div>
<app-root></app-root>
</body>
</html>
./src/index.html
Without Universal
Request /
Request scripts
Execute scripts
✅
~1400ms
Universal way
Request /
Run app on server
Request scripts
NOT INTERACTABLE
✅
~600ms
Universal Pre-render
Request /
Precompile Angular html
for every route
Request scripts
NOT INTERACTABLE
✅
Build time:
~30ms
Perfomance
- HTML and CSS loads
- Site is visible
these not interactable yet
~1400ms
~600ms
~30ms
Pure Angular
Universal
Pre-render
Universal vs Pre-render 📖
1/2
| pros | cons | |
|---|---|---|
|
Dynamic SSR |
suitable for apps with dynamic content |
if not cached – server generates response additional server for serving SSR content needed |
|
Static Pre-Rendering |
easy to CDN server doesn't have to generate the files |
not suitable for apps with dynamic content (not really) |
✅
💢
Scully vs NG Pre-render
2/2
json/markdown files as page content
document / window / navigator
3rd party libs which access the DOM
✅
Scully vs Pure SSR vs NG Pre-render
Well, it depends, all techniques works
How to bake 1/4
ng add @nguniversal/express-engine
How to bake 2/4
const routes: Routes = [
{
path: 'one',
component: PageOneComponent
},
{
path: 'two',
component: PageTwoComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabled'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }How to bake 3/4
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/one">Page One</a></li>
<li><a routerLink="/two">Page Two</a></li>
</ul>
<router-outlet></router-outlet>How to bake 4/4
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "static-app:build:production",
"serverTarget": "static-app:server:production",
"routes": [ // Handling dynamic routes
"/",
"/one",
"/two",
"/products/1234",
"/products/05919251"
]
}guess-parser statically analyze Angular application to discover how the routes from the analytics source map to JavaScript bundles.
Do not forget
Transfer state 📖
Do Universal for Dynamic pages 💡
Setup all necessary pages 🔭
• guess-parser is not an everything-parser
Initial content for SEO and Social Media 👌
• blog, E-commerce, news website, any content website
Who need it
Increase perceived perfomance 👍
• contentful - meaningful
What about Cons?
What about Cons?
🎁 Doesn't know about dynamic routes
🐌 Angular Bundle downloading
🤯 Juniors will be shocked
🤔 Not for internal apps
Prerender Angular NYC
By Konstantin Malikov
