What is static rendering in astro

AstroConceptBeginner · 3 min read

Static Rendering in Astro: What It Is and How It Works

In Astro, static rendering means generating the full HTML of your pages at build time, before users visit the site. This creates fast, pre-built pages that load instantly without waiting for JavaScript to run.

⚙️

How It Works

Static rendering in Astro works like baking a cake before a party. Instead of making the cake when guests arrive, you prepare it ahead of time so it's ready to serve immediately. Similarly, Astro builds your website pages into complete HTML files during the build process, not when someone visits.

This means when a user opens your site, their browser gets a fully formed page right away. There is no delay waiting for JavaScript to create the content. This approach improves speed and helps search engines easily read your site.

Astro achieves this by running your components and templates on the server during build time, then saving the output as static files. These files are then served directly to users, making the site fast and efficient.

💻

Example

This example shows a simple Astro component that uses static rendering to display a greeting message.

astro

---
const name = 'Friend';
---
<html lang="en">
  <head>
    <title>Static Rendering Example</title>
  </head>
  <body>
    <h1>Hello, {name}!</h1>
    <p>This page is fully rendered at build time.</p>
  </body>
</html>

Output

<h1>Hello, Friend!</h1> <p>This page is fully rendered at build time.</p>

🎯

When to Use

Use static rendering in Astro when your website content does not change often and you want fast load times. It is perfect for blogs, portfolios, documentation, and marketing sites where content updates happen during builds.

Static rendering improves SEO because search engines get full HTML pages immediately. It also reduces server load since pages are served as simple files without extra processing.

If your site needs frequent updates or user-specific content, you might combine static rendering with client-side JavaScript or server-side rendering for dynamic parts.

✅

Key Points

Static rendering generates full HTML pages at build time.
Pages load instantly with no waiting for JavaScript.
Great for fast, SEO-friendly sites with mostly fixed content.
Reduces server work by serving pre-built files.
Can be combined with dynamic techniques for interactive features.

✅

Key Takeaways

Static rendering in Astro builds full HTML pages before users visit.

It makes websites load faster and improves SEO.

Best for sites with mostly fixed content like blogs and portfolios.

Reduces server load by serving pre-built static files.

Combine with dynamic rendering for interactive or frequently updated content.