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

Made with Slides.com