Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Astro: The New Era of Fast, Modern Websites tha...

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.

Aurora Scharff

October 25, 2023
Tweet

More Decks by Aurora Scharff

Other Decks in Programming

Transcript

  1. Astro: The New Era of Fast, Modern Websites that ships

    zero JavaScript by default Aurora Walberg @aurora_walberg
  2. Static website rendering > Pages are pre-assembled and uploaded to

    a static host > Simple and efficient > Struggles with dynamic data and impractical to maintain
  3. Multi-Page Applications (MPAs) > HTML and data are dynamically merged

    on the server > Serves the merged result on page load > Page reloads per request
  4. Server-side rendering (SSR) > Pre-render the initial HTML on the

    server > Fully-formed HTML when opening the page > JavaScript is fetched alongside it
  5. 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
  6. 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
  7. 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
  8. Partial hydration with Islands > Define which components to load

    JavaScript for > Create an interactive “island” with JS > Only include this JS in the bundle
  9. Performance > Zero JavaScript by default > 100 scores on

    lighthouse > Static Site Generation > Optimized Images and Links > Edge-ready
  10. Developer experience > Created to be easy to use >

    Framework agnostic > File-based routing > Integrations
  11. 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