Rendering in Astro

Rendering is the fourth chapter of the free Astro tutorial. It answers one question for every page: when and where is its HTML made?

What each lesson covers:

  • How Astro Renders Pages: Rendering in plain words, SSG, SSR, CSR and hydration, Astro's static and on-demand modes, what a static site can and cannot do, rebuild triggers and the output setting.
  • On-Demand and Mixed Rendering: Adapters, Astro.request, Astro.url, Astro.redirect(), returning a Response, dynamic routes without getStaticPaths(), prerender, a decision guide, request security and the 500 page.

Rendering means turning your components into HTML. The first lesson explains the common terms in plain words: static site generation, server-side rendering, client-side rendering and hydration. It then shows Astro's default, where every page is built once at build time, and when a site needs to be rebuilt. The second lesson adds an adapter so pages can be built on each request instead. You read the request and URL, redirect, return your own response, build dynamic routes without getStaticPaths(), mix static and on-demand pages with prerender, and choose the right mode for each page.

Every lab runs Astro 7's real runtime in your browser. The Terminal shows which pages were built ahead of time and which ones run on every request.

Lessons in this section

  1. How Astro Renders Pages

    What rendering means, build time vs request time vs the browser, SSG, SSR, CSR and hydration, Astro's static and on-demand modes, client-side islands, static rendering in depth, keeping static sites fresh, the output setting and why hybrid was removed.

    • Explain SSG, SSR, CSR and hydration in plain words
    • Tell build time from request time
    • Know what static rendering can and cannot do
    • Choose the output setting
  2. On-Demand and Mixed Rendering

    How on-demand rendering works, server adapters, Astro.request, Astro.url, Astro.response, Astro.redirect(), returning a Response, dynamic routes without getStaticPaths(), the prerender export, mixing static and on-demand pages, a decision guide, request security, the 500 page and streaming.

    • Add an adapter and render a page on demand
    • Read the request: URL, query string and form data
    • Mix static and on-demand pages with prerender
    • Choose a rendering mode for each page