Jehlani Luciano Logo

On-Demand Rendering

Guidelines for enabling and using server-side rendering (SSR) in Astro projects.

astro
          
            ## Astro On-Demand Rendering (SSR) Guidelines

1.  Definition: On-demand rendering, or Server-Side Rendering (SSR), generates page HTML on the server _when a request is made_, rather than at build time. This allows for dynamic, personalized content. Astro defaults to static pre-rendering.

2.  Requirement: Server Adapter: To enable any on-demand rendering, you must install and configure a server adapter specific to your deployment environment (e.g., Node.js, Vercel, Netlify, Cloudflare).

    - Use `bunx astro add [adapter-name]` (e.g., `bunx astro add node`) to install and configure automatically.
    - Alternatively, install the package manually and add it to the `adapter` property in `astro.config.mjs`.

3.  Enabling On-Demand Rendering:

    - Per-Page/Endpoint Basis (Hybrid Mode - Default when adapter is added): Add `export const prerender = false;` at the top of the specific `.astro`, `.md`, `.mdx` page or `.js`/`.ts` endpoint file you want to render on demand. All other pages remain static (pre-rendered).
    - Site-Wide Default (`server` Mode): Set `output: 'server'` in `astro.config.mjs`. This makes _all_ pages and endpoints render on demand by default.
      - To make specific pages static in `server` mode, add `export const prerender = true;` to those files.

4.  SSR-Exclusive Features: These are available _only_ for pages/endpoints configured for on-demand rendering:

    - `Astro.request`: Access the full standard `Request` object:
      - `Astro.request.headers`: Read incoming request headers (e.g., cookies, authorization).
      - `Astro.request.method`: Get the HTTP method (GET, POST, etc.).
      - `await Astro.request.formData()` / `await Astro.request.json()`: Read request body (for POST/PUT requests, often in API routes).
    - `Astro.cookies`: Get, set, and delete cookies using the `Astro.cookies` API (`.get()`, `.set()`, `.delete()`, `.has()`).
    - `Astro.response`: Modify the outgoing response:
      - `Astro.response.status`: Set the HTTP status code (e.g., 404, 500).
      - `Astro.response.statusText`: Set the status text message.
      - `Astro.response.headers.set(...)`: Set response headers.
    - Returning `Response` Objects: Directly return a standard `new Response(...)` object from a page or endpoint for full control over the response (e.g., for custom 404s, redirects, API responses). `Astro.redirect()` is a helper for returning redirect responses.
    - Server Endpoints (API Routes): Create `.js`/`.ts` files in `src/pages/` that export functions for HTTP methods (GET, POST, etc.) to handle API requests securely on the server.
    - HTML Streaming: Astro streams HTML content chunk-by-chunk as it's rendered on the server, potentially improving Time To First Byte (TTFB).

5.  When to Use:

    - Pages requiring user authentication or session data.
    - Content that changes frequently and needs to be up-to-the-minute.
    - Personalized pages based on user preferences or location.
    - Handling form submissions server-side.
    - Building API routes.

6.  Recommendation: Start with the default static mode (`output: 'static'`) and opt-in specific pages to SSR (`export const prerender = false;`) unless the vast majority of your site requires dynamic rendering. Static pages are generally more performant and scalable.

Reference: [Astro On-Demand Rendering Docs](mdc:https:/docs.astro.build/en/guides/on-demand-rendering)