Astro for Angular astronauts - CSR, SSR, SSG, Astro and Angular

This talk introduces Astro, explaining how it works and why its approach means a huge performance boost. You will learn how to utilize Angular using Astro and get introduced to the built-in Angular SSG support as well.

Transcript

1. Astro for Angular astronauts. CSR, SSR, SSG, Astro and Angular, Marcell Kiss, 2024
2. Intro Marcell Kiss, MSc Contractor #EnterpriseArchitecture Angular Hungary 🇭🇺 Part-time trainer #AngularArchitects marcell.tech @marcelltech @marcellkiss @marcellkiss 🇩🇪
3. Overview ✅ Web Rendering ✅ Intro to Astro ✅ Angular in Astro ✅ Angular’s built-in SSG
4. Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation
5. CSR - Client-Side Rendering Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: …/api/info {info: …} 👀 ⚙ @marcelltech
6. Server Browser somesite.com Include main.js main.js 👀 SSR - Server-Side Rendering index.html [with content!] ⚙ @marcelltech ⚙
7. SSG - Static Site Generation Server Browser somesite.com index.html [with content!] Include main.js main.js 👀 ⚙ @marcelltech
8. Performance Summary ❌ CSR is resource-heavy for bots ❌ SSR is resource-heavy for us ✅ SSG has the lowest latency @marcelltech
9. @marcelltech
10. @marcelltech
11. @marcelltech
12. Intro to Astro ✅ Install Astro ✅ Structure ✅ Astro integrations
13. SSG - Build & Deploy Your Astro App (MPA) Index .html /home /impressum /user/:id Impressum .html ? @marcelltech
14. 🧑💻 Live Coding @marcelltech
15. Astro integrations @marcelltech
16. Angular in Astro ✅ Angular integration ✅ Hydration
17. 🧑💻 Live Coding @marcelltech Kudos to @BrandonRoberts 🙌
18. Angular’s SSG ✅ Application Builder ✅ Live Coding
19. CSR - Build & Deploy Your Angular App (SPA) Index.html /home /impressum /user/:id @marcelltech
20. Application Builder Your Angular App (SPA) @marcelltech CSR SSR SSG 🛠 Application Builder 📖 Docs: https://angular.dev/tools/cli/esbuild https://angular.dev/guide/prerendering#
21. 🧑💻 Live Coding @marcelltech
22. Marcell Kiss, 2024 Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss
23. Resources @marcelltech [Article] Angular Islands in Astro https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp [Article] Astro + Angular https://medium.com/ngconf/astro-angular-abe926dac097 [Docs] Angular new build system https://angular.io/guide/esbuild [Docs] Angular Pre-rendering https://angular.dev/guide/prerendering# [Docs] Astro integrations https://astro.build/integrations/ [Docs] Astro MDX Docs https://docs.astro.build/en/guides/integrations-guide/mdx/ [OSS] GitHub Repo https://github.com/marcellkiss/angular-astro-example