Slide 1

Slide 1 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Resources > My GitHub repo: github.com/aurorawalberg/astro-demo > Astro template apps: astro.build/themes > Astro docs

Slide 38

Slide 38 text

Thank you Twitter: @aurora_walberg GitHub: @aurorawalberg Blog: aurorawalberg.no

Slide 39

Slide 39 text

Questions?