Astro: The New Era of Fast, Modern Websites that ships zero JavaScript by default

Get introduced to Astro, the game-changing web framework designed to build faster, modern websites. This talk will explore how Astro blends the best of Multi-Page Applications (MPAs) and Single-Page Applications (SPAs) to deliver high-performance and developer-friendly web applications.

We will talk about Astro Islands, a pioneering concept that blends interactive UI components with static HTML for optimal performance. We'll look at how Astro's partial hydration strategy enables fast, parallel loading of interactive "islands", delivering a superior user experience without compromising on speed.

Transcript

1. Astro: The New Era of Fast, Modern Websites that ships zero JavaScript by default Aurora Walberg @aurora_walberg
3. Introduction > Aurora Walberg > Consultant at Inmeta > Norway, Oslo > Full-stack, web-focused
4. Rendering strategies
5. Static website rendering > Pages are pre-assembled and uploaded to a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
6. Multi-Page Applications (MPAs) > HTML and data are dynamically merged on the server > Serves the merged result on page load > Page reloads per request
7. Single-Page Applications (SPAs)
8. SPA vs. MPA lifecycle
9. Server-side rendering (SSR) > Pre-render the initial HTML on the server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
10. Static site generation (SSG) > Pages are pre-assembled and uploaded to a static host > Requires site redeployment whenever data changes > JavaScript is fetched alongside it
11. Hydration
12. Hydration Hydration is like watering the “dry” HTML with the “water” of interactivity and event handlers. - React core team member Dan Abramov https://github.com/reactwg/react-18/discussions/37
13. Server-side rendering
14. The problem
15. Where does Astro fit in here?
16. Where does Astro fit in here? > Multi-page application > SSG framework by default with opt-in to SSR > Ability to feel like a SPA with Islands
17. Islands Architecture
20. Partial hydration with Islands > Define which components to load JavaScript for > Create an interactive “island” with JS > Only include this JS in the bundle
22. Progressive hydration > Delay JavaScript further by loading it on demand > Load JavaScript during downtime
23. Features and benefits
24. Performance
25. Performance > Zero JavaScript by default > 100 scores on lighthouse > Static Site Generation > Optimized Images and Links > Edge-ready
26. Server-side data access
27. Server-side data access
28. Developer experience
29. Developer experience > Created to be easy to use > Framework agnostic > File-based routing > Integrations
30. Search Engine Optimization (SEO)
31. Demo
32. Use cases
33. Use cases > Content-focused websites > Blogs, marketing websites, doc websites, portfolios, static apps > Sites that require good SEO and performance > Not meant for highly interactive apps
37. Resources > My GitHub repo: github.com/aurorawalberg/astro-demo > Astro template apps: astro.build/themes > Astro docs
38. Thank you Twitter: @aurora_walberg GitHub: @aurorawalberg Blog: aurorawalberg.no
39. Questions?