Deferrable Views and Incremental Hydration

1. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Deferrable Views and Incremental Hydration Alexander Thalhammer, ANGULARarchitects.io Git: https://github.com/L-X-T/angular-meetup-250612 https://LXT.dev
2. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 2 Why performance optimization? UX Ranking Traffic Bounce- Rate Conversions
3. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 3 Today's topics @defer incremental hydration
4. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 6 Instagram
5. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 7 Reality
6. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 8 • Alexander Thalhammer from Graz, Austria (est. 1983) • Angular Software Tree GmbH (est. 2019) • Web Dev for 25 years • Since 2017 Angular Dev • Since 2021 Angular Evangelist, Coach & Consultant • Member of the Angular Architects Hi, it's me à @LX_T
7. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 9 @LX_T à favorite topics Performance 🚀 Accessibility ♿ Best Practices 📈
8. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 10 1) Deferrable Views (NG >= 17) 2) Incremental Hydration (NG >= 19) Agenda
9. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 39 • 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 Deferrable Views with @defer (v17)
10. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 40 • 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) Deferrable Views – Examples
11. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 41 • triggers (lazy) loading of the component • e.g. on viewport (like ngOptimizedImage) Deferrable Views – Trigger Intro
12. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 42 • on • immediate • idle (default) • viewport (like ngOptimizedImage) • hover (mouseover & focusin) • interaction (click & keydown) • timer(4200ms) (use case à demo) Deferrable Views – Trigger Details • when • boolean symbol or • Signal<boolean> or • function • both are one-way ticket • combination possible
13. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 43 • 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 Deferrable Views – Prefetch
14. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 44 • @placeholder • @loading • @error Deferrable Views – Placeholder & Loading
15. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 45 • 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) Deferrable Views – Best Practices
16. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 46 • 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 Deferrable Views – Combination with SSR
17. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 47 Demo: @defer https://github.com/L-X-T/angular-meetup-250612 ng s --no-hmr
18. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 48 Incremental Hydration (v19)
19. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 49 • 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 Incremental Hydration (v19)
20. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 50 • same triggers like @defer • on (immediate, idle, viewport, hover, interaction) • when (boolean symbol, Signal<boolean> or function) • never (for static content without interactivity) Incremental Hydration – Trigger
21. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 51 • Above-the-fold content (now usable) • Dynamic below-the-fold ccntent • Products in a online shop • Forms and Actions • Interactive Tables Incremental Hydration – Scenarios
22. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 52 Demo: Incremental Hydration https://github.com/L-X-T/angular-meetup-250612 ng s --no-hmr
23. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 53 1) Faster Angular Apps (LCP & INP) 2) Better UX 3) Everybody happy J Recap – Why SSR & Incremental Hydration
24. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 55 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!
25. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Why aren't you using it?
26. • 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
27. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 58 [X] @LX_T [web] https://lxt.dev Thank you for the attention Remote Workshops and Consulting https://angulararchitects.io