How to prerender page in astro

AstroHow-ToBeginner · 3 min read

How to Prerender a Page in Astro: Simple Guide

In Astro, you prerender a page by adding export const prerender = true; at the top of your page component. This tells Astro to generate the HTML at build time, making your page load faster and improving SEO.

📐

Syntax

To prerender a page in Astro, you add a special export at the top of your page file. This export is a boolean named prerender. Setting it to true tells Astro to build the page as static HTML during the build process.

export const prerender = true;: Enables prerendering for the page.
This must be placed in the page's top-level script.
Works for pages inside the src/pages directory.

astro

export const prerender = true;

💻

Example

This example shows a simple Astro page that prerenders a greeting message. The prerender export ensures the page is built as static HTML.

astro

---
export const prerender = true;
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prerendered Page</title>
  </head>
  <body>
    <h1>Hello from a prerendered Astro page!</h1>
  </body>
</html>

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prerendered Page</title> </head> <body> <h1>Hello from a prerendered Astro page!</h1> </body> </html>

⚠️

Common Pitfalls

Some common mistakes when trying to prerender pages in Astro include:

Not exporting prerender at the top level of the page file.
Setting prerender to false or omitting it, which disables prerendering.
Trying to prerender dynamic routes without providing all possible paths (use getStaticPaths for that).
Using client-only components that require JavaScript without fallback content, which can cause hydration issues.

Correct usage example:

---
export const prerender = true;
---

Incorrect usage example (won't prerender):

---
const prerender = true;
---

astro

---
export const prerender = true;
---

<!-- Correct: Prerenders this page -->

---
const prerender = true;
---

<!-- Incorrect: Does not prerender because it's not exported -->

📊

Quick Reference

Feature	Description
export const prerender = true;	Enables static prerendering of the page at build time.
export const prerender = false;	Disables prerendering; page is rendered on demand.
getStaticPaths()	Used with dynamic routes to specify which pages to prerender.
Client-only components	May need fallback content to avoid hydration errors.

✅

Key Takeaways

Add export const prerender = true; at the top of your Astro page to prerender it.

Prerendering generates static HTML at build time for faster load and better SEO.

Dynamic routes require getStaticPaths to prerender multiple pages.

Always export prerender correctly; just declaring it as a variable won't work.

Beware of client-only components that may need fallback content to avoid hydration issues.