Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer SSR, SSG, Deferrable Views and Incremental Hydration in NG 19 Alexander Thalhammer, ANGULARarchitects.io Git: https://github.com/L-X-T/ssr-ih-ng19-days https://LXT.dev https://LXT.dev

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 2 Why performance optimization? UX Ranking Traffic Bounce- Rate Conversions

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 3 Why server-side rendering? improve Initial Load save ressources

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 4 Why server-side rendering? https://www.acldigital.com/blogs/zero-hydration-qwik-future-web

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Why aren't you using it?

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 6 Challenges server login dynamic content translation federation

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 7 Instagram

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 8 Reality

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 9 • Alexander Thalhammer from Graz, Austria (est. 1983) • Angular Software Tree GmbH (est. 2019) • Web Dev for 24 years • Since 2017 Angular Dev • Since 2021 Angular Evangelist, Coach & Consultant • Member of the Angular Architects Hi, it's me → @LX_T

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 10 @LX_T → favorite topics Performance Accessibility Best Practices

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 11 1) Server-Side Rendering (SSR) 2) Prerendering during build (SSG) 3) Hydration (NG >= 16) 4) Event Replay (NG >= 18) 5) Hybrid Rendering (NG => 19) 6) Deferrable Views (NG >= 17) 7) Incremental Hydration (NG >= 19) Agenda

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 12 Labs Audit @defer Incremental Hydration [repository] https://github.com/L-X-T/ssr-ih-ng19-days

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer First things first

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 14 • Lazy Loading === Defer Loading • Lazy Loading for router-based lazy loading using loadChildren() / loadComponent() • Defer Loading for template-based lazy loading using @defer • Hydration → attach JS (event handlers) to static HTML • client-side rendering SR, server-side rendering, static site generation • above-the-fold First things first: terminology

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 15 • measure your Angular apps initial load performance • make improvements measurable • how to measure? First things first: Measure performance

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 16 • ng b(uild) • npm i - g serve • serve dist/[appName]/browser -s • open http://localhost:3000 in chrome and run Lighthouse (DevTools) test Test Angular App with Google Lighthouse

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 17 Lab: Measure performance with Lighthouse https://github.com/L-X-T/ssr-ih-ng19-days/blob/main/labs/01-audit.md

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 18 • replaces Universal package • community solution • new per default part of: ng new • or existing: ng add @angular/ssr 1) SSR @angular/ssr (v17)

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 19 • (static) HTML is rendered on the server and then downloaded by client • like classic web pages • better performance 1) SSR – Essentials

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 20 • when trying to rank in search enginges, implement the Meta Tags 1) SSR – SEO Considerations

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 21 • valid HTML required (anyway good practice ☺) • certain Browser features not available, e.g. • document, window, localStorage, sessionStorage • private readonly document = inject(DOCUMENT); • private readonly platform = inject(PLATFORM_ID); 1) SSR – Common Pitfalls

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 22 1) SSR – platfrom check

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 23 1) SSR – Browser only render hooks • afterNextRender() • afterRender() → might be renamed into afterEachRender()

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 24 1) SSR – caution with ng serve in v19 • disable hot module reloading • ng serve –no-hmr

Slide 25

Slide 25 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 25 DEMO SSR ng serve --no-hmr https://github.com/L-X-T/ssr-ih-ng19-days

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 26 • on-demand-rendering on server needs time & ressources • solution: Prerendering (SSG) • Static content can be pre-rendered at build time • cons • not usable for dynamic content • delays build time 2) Prerendering during building (SSG) • pros • very fast initial load time • no node.js/Express server needed

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 27 DEMO SSG ng build https://github.com/L-X-T/ssr-ih-ng19-days

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 28 • now called full-application hydration • interactivity (JS) is attached in client to static HTML from server • specifically, all Angular event handlers (click)="doSth()" are attached 3) non-destructive (v16)

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 29 • until Angular 16 SSR HTML was thrown away and replaced with CSR HTML • resulted in flickering during initial loading • hydration avoids layout shifts (bad UX) • only with this feature is SSR in Angular usable (from v16 onward) 3) why non-destructive?

Slide 30

Slide 30 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 30 • some components (e.g. external libraries) are not compatible • hydration can be disabled for individual components using • or via host binding 3) Hydration Trouble Shooting

Slide 31

Slide 31 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 31 • user events are captured and fired again after hydration • this enables user interactions during the initial loading of the app 4) Event Replay (v18)

Slide 32

Slide 32 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 32 • JSAction (a mini-library from Google’s Wiz Framework) intercepts all events on the body element and fires them again after the initial load 4) Event Replay – Details

Slide 33

Slide 33 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 33 • from NG 19 onwards, we can choose the mode for each route: • RenderMode.Prerender (SSG) for static content • RenderMode.Server (SSR) for dynamic content • RenderMode.Client (CSR) for user-dependent content 5) Hyrbid Rendering (v19)

Slide 34

Slide 34 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 34 • additionally, redirects or error pages can be delivered 5) Hyrbid Rendering – 301 & 404

Slide 35

Slide 35 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 35 DEMO Hybrid Rendering https://github.com/jeanmeche/ssr-v19

Slide 36

Slide 36 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 36 Standalone Components (v14)

Slide 37

Slide 37 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 37 NgModules – Common Issue AppModule … Root Module Feature Module(s) Shared Module SharedModule

Slide 38

Slide 38 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 38 Digression – Angular Migrations (mandatory!) standalone control flow build w/ esbuild & vite lazy-loaded routes signal inputs & queries cleanup imports & self-closing tags

Slide 39

Slide 39 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 39 Angular Docs – Migration https://angular.dev/reference/migrations

Slide 40

Slide 40 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 40 • only works with standalone components • alternative to router-based Lazy Loading in Angular • to reduce initial load (size and time) → improve performance • without own route • very good DX compared to previous solutions with ViewContainerRef 6) Deferrable Views with @defer (v17)

Slide 41

Slide 41 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 41 • widgets that are used on multiple routes • lazy loading large 3rd-party dependencies (e.g., charts, tables, etc.) • forces CSR → combine with SSR for user-dependent content (e.g., price) • not suited for above-the-fold content (initially only placeholder is shown) 6) Deferrable Views – Examples

Slide 42

Slide 42 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 42 • triggers (lazy) loading of the component • e.g. on viewport (like ngOptimizedImage) 6) Deferrable Views – Trigger Intro

Slide 43

Slide 43 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 43 • on • immediate • idle (default) • viewport (like ngOptimizedImage) • hover (mouseover & focusin) • interaction (click & keydown) • timer(4200ms) (use case → demo) 6) Deferrable Views – Trigger Details • when • boolean symbol or • Signal or • function • both are one-way ticket • combination possible

Slide 44

Slide 44 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 44 • with prefetch, the deferred JavaScript can be preloaded • similar to the PreloadingStrategy used in router-based lazy loading • this speeds up the loading process when the @defer trigger is activated 6) Deferrable Views – Prefetch

Slide 45

Slide 45 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 45 • @placeholder • @loading • @error 6) Deferrable Views – Placeholder & Loading

Slide 46

Slide 46 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 46 • be careful with nested @defer blocks • they should use different triggers • be cautious when @defer is triggered above-the-fold and during the initial load • no layout shifts should occur (poor UX) 6) Deferrable Views – Best Practices

Slide 47

Slide 47 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 47 • in combination with SSR, the @placeholder is rendered on the server • or nothing if no @placeholder is provided • only on the client the @defer blocks' main content is rendered • thereby enforcing client-side rendering • only with Incremental Hydration main content pre-rendered on the server 6) Deferrable Views – Combination with SSR

Slide 48

Slide 48 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 48 Lab: @defer https://github.com/L-X-T/ssr-ih-ng19-days/blob/main/labs/02-defer.md

Slide 49

Slide 49 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 49 7) Incremental Hydration (v19) incremental hydration

Slide 50

Slide 50 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 50 • based upon Hydration, @defer and Event Replay • enables even better intial load experience, because • less JavaScript is shipped → partial lazy loading of JS on demand • @defer blocks now can also be used above-the-fold, because • the main content (instead of @placeholder) is rendered on the server 7) Incremental Hydration (v19)

Slide 51

Slide 51 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 51 • same triggers like @defer • on (immediate, idle, viewport, hover, interaction) • when (boolean symbol, Signal or funktion) • never (for static content without interactivity) 7) Incremental Hydration – Trigger

Slide 52

Slide 52 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 52 • Above-the-fold content (now usable) • Dynamic below-the-fold ccntent • Products in a online shop • Forms and Actions • Interactive Tables 7) Incremental Hydration – Scenarios

Slide 53

Slide 53 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 53 Lab: Incremental Hydration https://github.com/L-X-T/ssr-ih-ng19-days/blob/main/labs/03-incremental-hydration.md

Slide 54

Slide 54 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 54 1) Faster Angular Apps (LCP & INP) 2) Better UX 3) Everybody happy ☺ Recap – Why SSR & Incremental Hydration

Slide 55

Slide 55 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 55 1) Build Application with Angular 2) Server-Side Rendering with node.js 3) Transfer to / Load by client (HTTP) 4) Browser Parsing & Rendering 5) Full app Hydration 6) Full app Event Replay if(@defer) Load, Parse, Render, Hydrate & Event Replay if(hydrate) Load, Parse, Hydrate & Event Replay Recap – Hydration steps

Slide 56

Slide 56 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 56 Conclusion improve you initial load with SSR SSG (prerender) static content @defer for components below-the-fold Incremental Hydration for above-the-fold try it & play with it!

Slide 57

Slide 57 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 57 • angular.dev/guide/performance - official SSR docs • angular.dev/guide/incremental-hydration - official IH docs • youtube.com/watch?v=v5KTJGEYLsM – IH intro by Jessica Janiuk • angulararchitects.io/blog/complete-guide-for-server-side-rendering-ssr-in-angular/ • angulararchitects.io/training/angular-performance-optimization-workshop/ Ressources

Slide 58

Slide 58 text

• Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 58 [X] @LX_T [web] https://lxt.dev Thank you for the attention Slides & Source Remote Workshops and Consulting https://angulararchitects.io Angular Updates