Modern Web Rendering Patterns

In the ever-evolving landscape of web development, choosing the right rendering strategy is crucial for performance and user experience. Today, we’ll explore Static Site Generation (SSG), Server-Side Rendering (SSR), and the hybrid approaches popularized by frameworks like Astro and Next.js.

1. Static Site Generation (SSG)

SSG is the process of generating HTML at build time. This is the default for Astro.

Pros

• Performance: HTML is pre-rendered and served from a CDN.
• Security: No server-side processing at runtime means fewer attack vectors.
• Cost: Hosting static files is extremely cheap.

Example Configuration (Astro)

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static', // Default
});

2. Server-Side Rendering (SSR)

SSR generates the HTML on every request. This is useful for highly dynamic content, such as user dashboards or real-time data feeds.

Note: SSR requires a server environment (Node.js, Deno, Bun) to run.

When to use SSR?

1. Personalized content (e.g., “Welcome, Nova”).
2. Dynamic routes that cannot be known at build time.
3. Protected routes requiring authentication.

3. Incremental Static Regeneration (ISR)

ISR allows you to update static content after you’ve built your site. You can use this to regenerate static pages on a specific interval.

Feature	SSG	SSR	ISR
Build Time	High	Low	Medium
Request Time	Fast	Slow	Fast
Data Freshness	Low	High	Medium

Code Comparison

Here is how you might fetch data in different patterns.

Client-Side Fetch (React)

import { useState, useEffect } from 'react';

export function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(r => r.json()).then(setUser);
  }, []);

  if (!user) return <div>Loading...</div>;
  return <h1>{user.name}</h1>;
}

Astro Component (Server-First)

---
// This runs on the server (or at build time)
const response = await fetch('https://api.example.com/user');
const user = await response.json();
---

<h1>{user.name}</h1>

Conclusion

There is no “one size fits all.”

• Use SSG for blogs, documentation, and marketing sites.
• Use SSR for dynamic applications.
• Use Astro to mix and match!

Figure 1: Complex systems require thoughtful architecture.