AstroConceptBeginner · 3 min read

What is Server Rendering in Astro: Explained Simply

In Astro, server rendering means generating the full HTML of a webpage on the server before sending it to the browser. This helps pages load faster and improves SEO because the content is ready immediately without waiting for JavaScript to run.

⚙️

How It Works

Server rendering in Astro works by building the webpage's HTML on the server side. Imagine a chef preparing a full meal in the kitchen (server) before serving it to the customer (browser). The customer gets the complete dish right away, instead of waiting for ingredients to be cooked one by one at the table.

Astro compiles your components and content into static HTML during the build or request time. When a user visits your site, the server sends this ready-made HTML, so the page appears instantly. This is different from client-side rendering, where the browser downloads JavaScript first and then builds the page, which can cause delays.

💻

Example

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

astro

---
const name = 'Friend';
---
<html lang="en">
  <head>
    <title>Server Rendered Page</title>
  </head>
  <body>
    <h1>Hello, {name}!</h1>
    <p>This content is rendered on the server.</p>
  </body>
</html>

Output

<h1>Hello, Friend!</h1> <p>This content is rendered on the server.</p>

🎯

When to Use

Use server rendering in Astro when you want your website to load very fast and be easy for search engines to read. It is great for blogs, marketing sites, documentation, and any page where content does not change often or needs to be visible immediately.

For example, if you run a blog, server rendering ensures your articles appear instantly to visitors and search engines, improving user experience and SEO. It also helps on slow internet connections or older devices because the browser does less work.

✅

Key Points

Server rendering creates full HTML on the server before sending it to the browser.
This approach improves page load speed and SEO.
Astro defaults to server rendering for components unless client-side interactivity is needed.
It is ideal for static content and sites where fast initial load matters.

✅

Key Takeaways

Server rendering in Astro generates complete HTML on the server for fast page loads.

It improves SEO by providing content immediately to search engines.

Astro uses server rendering by default unless client-side JavaScript is required.

Ideal for blogs, marketing sites, and static content with minimal interactivity.