Astro: The New Era of
Fast, Modern Websites
that ships zero
JavaScript by default
Aurora Walberg
@aurora_walberg
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Introduction
> Aurora Walberg
> Consultant at Inmeta
> Norway, Oslo
> Full-stack, web-focused
Slide 4
Slide 4 text
Rendering strategies
Slide 5
Slide 5 text
Static website rendering
> Pages are pre-assembled and
uploaded to a static host
> Simple and efficient
> Struggles with dynamic data and
impractical to maintain
Slide 6
Slide 6 text
Multi-Page Applications (MPAs)
> HTML and data are
dynamically merged on
the server
> Serves the merged
result on page load
> Page reloads per
request
Slide 7
Slide 7 text
Single-Page Applications (SPAs)
Slide 8
Slide 8 text
SPA vs. MPA lifecycle
Slide 9
Slide 9 text
Server-side rendering (SSR)
> Pre-render the initial
HTML on the server
> Fully-formed HTML when
opening the page
> JavaScript is fetched
alongside it
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
Hydration
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
Server-side rendering
Slide 14
Slide 14 text
The problem
Slide 15
Slide 15 text
Where does Astro fit in here?
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Islands Architecture
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Partial hydration with Islands
> Define which components to load
JavaScript for
> Create an interactive “island” with JS
> Only include this JS in the bundle
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Progressive hydration
> Delay JavaScript further by loading it
on demand
> Load JavaScript during downtime
Slide 23
Slide 23 text
Features and benefits
Slide 24
Slide 24 text
Performance
Slide 25
Slide 25 text
Performance
> Zero JavaScript by default
> 100 scores on lighthouse
> Static Site Generation
> Optimized Images and Links
> Edge-ready
Slide 26
Slide 26 text
Server-side data access
Slide 27
Slide 27 text
Server-side data access
Slide 28
Slide 28 text
Developer experience
Slide 29
Slide 29 text
Developer experience
> Created to be easy to use
> Framework agnostic
> File-based routing
> Integrations
Slide 30
Slide 30 text
Search Engine Optimization
(SEO)
Slide 31
Slide 31 text
Demo
Slide 32
Slide 32 text
Use cases
Slide 33
Slide 33 text
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