What rendering modes does Astro support? What are the differences between Static Generation (SSG) and Server-Side Rendering (SSR)?

Astro supports multiple rendering modes, allowing you to choose the most suitable rendering strategy for different use cases. Understanding these rendering modes is crucial for building high-performance Astro applications.

Main Rendering Modes:

1. Static Generation (SSG):

   • Default mode
   • Generates HTML at build time
   • Suitable for pages with infrequently changing content
   • Best performance, SEO-friendly

   astro
   // src/pages/index.astro
   ---
   const posts = await fetch('https://api.example.com/posts').then(r => r.json());
   ---
   
   <h1>Blog Posts</h1>
   {posts.map(post => (
     <article>
       <h2>{post.title}</h2>
       <p>{post.excerpt}</p>
     </article>
   ))}

2. Server-Side Rendering (SSR):

   • Dynamically generates HTML on each request
   • Suitable for pages requiring real-time data
   • Requires configuring an Adapter

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import vercel from '@astrojs/vercel/server';
   
   export default defineConfig({
     output: 'server',
     adapter: vercel(),
   });

   astro
   // src/pages/dashboard.astro
   ---
   // Executes on every request
   const user = await getUserFromSession(Astro.request);
   const data = await fetchUserData(user.id);
   ---
   
   <h1>Welcome, {user.name}</h1>
   <p>Your data: {data}</p>

3. Hybrid Rendering:

   • Combines static and dynamic rendering
   • Can specify different rendering modes for different pages
   • Provides maximum flexibility

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import vercel from '@astrojs/vercel/server';
   
   export default defineConfig({
     output: 'hybrid',
     adapter: vercel(),
   });

   astro
   // src/pages/static.astro
   ---
   // Static page
   export const prerender = true;
   ---
   
   <h1>Static Page</h1>

   astro
   // src/pages/dynamic.astro
   ---
   // Dynamic page
   export const prerender = false;
   ---
   
   <h1>Dynamic Page</h1>

4. Client-Side Rendering:

   • Uses client:only directive
   • Renders entirely in the browser
   • Suitable for components requiring extensive client-side interaction

   astro
   ---
   import InteractiveChart from '../components/InteractiveChart.jsx';
   ---
   
   <InteractiveChart client:only="react" />

Prerender Configuration:

astro
---
// Control prerender behavior for individual pages
export const prerender = true; // Static generation
export const prerender = false; // Server-side rendering
export const prerender = 'auto'; // Automatic detection
---

Dynamic Routes:

astro
---
// src/pages/blog/[id].astro
export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { id } = Astro.params;
const { post } = Astro.props;
---

<h1>{post.title}</h1>
<p>{post.content}</p>

Adapters:

Adapters deploy Astro projects to different platforms:

bash
# Vercel
npx astro add vercel

# Netlify
npx astro add netlify

# Cloudflare
npx astro add cloudflare

# Node.js
npx astro add node

javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/server';
import netlify from '@astrojs/netlify/edge';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: vercel(), // or netlify(), cloudflare()
});

Guide to Choosing Rendering Modes:

1. Use Static Generation (SSG):

   • Blog posts
   • Documentation pages
   • Marketing pages
   • Pages with infrequently changing content

2. Use Server-Side Rendering (SSR):

   • User dashboards
   • Pages requiring authentication
   • Real-time data display
   • Personalized content

3. Use Hybrid Rendering:

   • Mostly static content with some dynamic parts
   • Large applications requiring flexibility
   • Applications with both public and private pages

4. Use Client-Side Rendering:

   • Complex interactive components
   • Components requiring extensive client-side state management
   • Features that don't need SEO

Performance Optimization Tips:

1. Use static generation by default
2. Only enable SSR for pages that need dynamic content
3. Use client:* directives to control hydration timing
4. Leverage hybrid rendering to balance performance and functionality
5. Use adapters appropriately to optimize deployment

Understanding Astro's rendering modes helps you build web applications that are both fast and flexible.