Overview of Astro Rendering Options

Aug 20, 2024

Notes on Astro Rendering Options

Introduction

  • Presenter: Chris
  • Topic: Different rendering options in Astro
  • Focus: Basic Astro site, middleware, Astro Islands

Basic Astro Site

  • Default behavior: Static HTML files built ahead of time
    • Server sends pre-built HTML directly to the client
    • Fast response time
  • Limitation: Static files mean no dynamic user-specific content until the site is rebuilt

Rendering Options in Astro

  1. Static Site Generation (SSG)
    • HTML is pre-built and served to clients
    • Suitable for pages that do not change often
  2. Server-Side Rendering (SSR)
    • HTML is generated dynamically on the server
    • Can incorporate request-specific data
    • Slower than static since it generates HTML on each request

Use Cases

  • SSG by Default: Use static generation for most pages, except a few that require dynamic content.
  • SSR by Default: Default to server-side rendering and optionally pre-render specific pages.
  • Hybrid Mode:
    • Newer mode allowing default static builds with optional server-side rendered routes
    • Use export const preRender = false to render a route dynamically

Adapters in Astro

  • Required for server-side rendering
  • Examples include:
    • Cloudflare
    • Dino
    • Netlify
    • Node
    • Vercel
  • Adapters enable server runtime interaction for different routes

Middleware in Astro

  • New feature that intercepts requests
  • Works with both SSG and SSR
  • Can inject data into the final page
  • Not the main focus of this video

Astro Islands

  • Allows integration of interactive components like React within static pages
  • Client Directives: Control when JavaScript loads for interactive components
    • client:load: Load JavaScript immediately
    • client:visible: Load JavaScript when the component is visible in the viewport
  • Enables mix of static and dynamic content on pages

Code Demonstration

  1. Astro Configuration
    • Blank project template defaults to static site generation
    • Run npm run build to generate static pages
  2. Adding Netlify Adapter
    • Install the adapter to enable server-side rendering
    • Configure to allow per-route pre-rendering or server-side rendering
  3. Creating Routes
    • Example of setting pre-render for specific routes (e.g., About page)
    • Demonstrated changes in generated files based on pre-render settings

Conclusion

  • Astro provides various rendering strategies to balance speed and dynamic content
  • Middleware and Astro Islands offer additional features for routing and interactivity
  • For further information, feedback on middleware and Astro Islands is welcome.