×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Astro for Angular astronauts. CSR, SSR, SSG, Astro and Angular, Marcell Kiss, 2024
Slide 2
Slide 2 text
Intro Marcell Kiss, MSc Contractor #EnterpriseArchitecture Angular Hungary ππΊ Part-time trainer #AngularArchitects marcell.tech @marcelltech @marcellkiss @marcellkiss π©πͺ
Slide 3
Slide 3 text
Overview β Web Rendering β Intro to Astro β Angular in Astro β Angularβs built-in SSG
Slide 4
Slide 4 text
Web Rendering CSR - Client-Side Rendering SSR - Server-Side Rendering SSG - Static Site Generation
Slide 5
Slide 5 text
CSR - Client-Side Rendering Server Browser somesite.com index.html [empty shell] Include main.js main.js Request: β¦/api/info {info: β¦} π β @marcelltech
Slide 6
Slide 6 text
Server Browser somesite.com Include main.js main.js π SSR - Server-Side Rendering index.html [with content!] β @marcelltech β
Slide 7
Slide 7 text
SSG - Static Site Generation Server Browser somesite.com index.html [with content!] Include main.js main.js π β @marcelltech
Slide 8
Slide 8 text
Performance Summary β CSR is resource-heavy for bots β SSR is resource-heavy for us β SSG has the lowest latency @marcelltech
Slide 9
Slide 9 text
@marcelltech
Slide 10
Slide 10 text
@marcelltech
Slide 11
Slide 11 text
@marcelltech
Slide 12
Slide 12 text
Intro to Astro β Install Astro β Structure β Astro integrations
Slide 13
Slide 13 text
SSG - Build & Deploy Your Astro App (MPA) Index .html /home /impressum /user/:id Impressum .html ? @marcelltech
Slide 14
Slide 14 text
π§π» Live Coding @marcelltech
Slide 15
Slide 15 text
Astro integrations @marcelltech
Slide 16
Slide 16 text
Angular in Astro β Angular integration β Hydration
Slide 17
Slide 17 text
π§π» Live Coding @marcelltech Kudos to @BrandonRoberts π
Slide 18
Slide 18 text
Angularβs SSG β Application Builder β Live Coding
Slide 19
Slide 19 text
CSR - Build & Deploy Your Angular App (SPA) Index.html /home /impressum /user/:id @marcelltech
Slide 20
Slide 20 text
Application Builder Your Angular App (SPA) @marcelltech CSR SSR SSG π Application Builder π Docs: https://angular.dev/tools/cli/esbuild https://angular.dev/guide/prerendering#
Slide 21
Slide 21 text
π§π» Live Coding @marcelltech
Slide 22
Slide 22 text
Marcell Kiss, 2024 Questions and Answers Thanks for listening! marcell.tech @marcelltech @marcellkiss @marcellkiss
Slide 23
Slide 23 text
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