Strategies for Server Side Rendering Angular Applications

on YouTube ↗21m

" summary

Demonstrates server rendering with Angular Universal plus a client-side "hybrid" that boots tiny pieces via Angular Elements, using a minimal bootstrap module and lazy-loaded element modules. Claims reduce main bootstrap from ~540 KB to ~172 KB and load interactive chunks as small as ~8 KB; first meaningful paint falls to about 1.4 s and first-interactive to about 2.6 s. Explains using tree-shakable providers so services only instantiate when an element requests them, and shows templates that hydrate server HTML while adding focused interactivity.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 1:11Who should use it
3. 7:01The problem
4. 11:00Hybrid Rendering with Elements
5. 17:15Card Services
6. 18:28Tree Checkable Providers
7. 19:26Summary

" related talks

• 26mServer Side Rendering with Angular UniversalNir Kaufman · AngularUP 2016
• 24mAngular 2 Server Side RenderingWassim Chegham · Angular Camp 2016
• 28mServer-side rendering with Angular 2Wassim Chegham · NG Poland 2016
• 23mPre-Rendering StrategiesJeff Cross · AngularConnect 2017
• 22mAngular Pre Rendering for SEO, Speed, and Happy UsersJeff Cross · ng-conf 2017
• 20mSven van StraalenSven van Straalen · AngularNL 2019
• 51mThe Jedi Path to Angular UniversalMichel Murabito · Angular Day 2018
• 41mServer-side rendering with Angular—be faster and more SEO, CDN and user-friendly!Maciej Treder · JavaScript fwdays'19