Prerendering

In hybrid mode, each page chooses whether to pre-render at build or render per-request.

3 min read Level 2/5 #astro#prerender#hybrid

What you'll learn

Set `prerender` on a page
Mix static and dynamic pages

export const prerender = true | false flips a single page between static and server rendering. The rest of the project keeps its default.

Server Default, Static Marketing Page

---
// src/pages/index.astro
export const prerender = true;     // build to static HTML
---

<html>
  <body>
    <h1>Welcome to our site!</h1>
  </body>
</html>

Build outputs dist/index.html — fast, cacheable.

Static Default, Dynamic Dashboard

If your project is mostly static but one page needs request data:

---
// src/pages/dashboard.astro
export const prerender = false;
const user = await getUser(Astro.cookies.get("session")?.value);
---

<h1>Hi, {user?.name ?? "stranger"}</h1>

The page renders on every request. The rest of the site stays static.

API Routes (Endpoints) Are Often Dynamic

You’ll see export const prerender = false on .ts endpoint files when they need request data. We cover endpoints in two lessons.

What “Prerender True” Disables

A page with prerender = true is just like static mode for that page:

Astro.request is built from a placeholder (won’t reflect real cookies, headers, etc.)
Astro.cookies.set() won’t persist
Dynamic routes need getStaticPaths
The page renders once at build

Up Next

Adapters — what makes server mode actually deploy somewhere.

Adapters →