SSR vs SSG: Choosing the Right Rendering Strategy

Understanding rendering strategies is fundamental to modern web development. Selecting between SSG and SSR directly impacts performance, caching, and hosting cost.

How SSG Works

At build time, your framework (Astro, Next.js, Hugo) reads all content files and templates, runs data-fetching code, and writes complete HTML files to a dist/ directory. At runtime, the server (or CDN) simply reads and delivers those pre-built files — no code executes per request.

# Astro SSG build
npm run build
# Outputs HTML to dist/ — ready to upload to any static host

Ideal for: blogs, documentation, marketing sites, portfolios, landing pages — any content that does not change between requests.

Static Site Generation (SSG)

In SSG, HTML pages are pre-built at compile time.

Pros:

• Maximum Speed: Static files served directly from CDN nodes worldwide.
• Low Server Cost: No active server required; host on cloud storage or static hosts.
• Security: Reduced attack surface because there is no backend runtime executing code on request.

Cons:

• Stale content: Pages must be rebuilt to reflect new data.
• Build time: Large sites (thousands of pages) can take minutes to build.

How SSR Works

In SSR, your server runs template code on every incoming request, fetches any needed data (from a database, API, or session store), and returns freshly rendered HTML. The HTML is personalised and current at the moment of delivery.

// Next.js SSR example — runs on every request
export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  const feed = await fetchFeed(user.id);
  return { props: { user, feed } };
}

Ideal for: dashboards, e-commerce (inventory, pricing), social media feeds, anything requiring authentication or real-time data.

Server-Side Rendering (SSR)

In SSR, pages are generated dynamically on the server upon every request.

Pros:

• Real-Time Data: Ideal for dashboards, real-time feeds, and user-tailored content.
• Dynamic Personalization: Handle cookie authentication and session state on the server.

Cons:

• Higher latency: Server must compute HTML before responding.
• Infrastructure cost: Requires active server compute (cannot use static CDN-only hosting).

Performance Comparison

Dimension	SSG	SSR
Time To First Byte (TTFB)	Very fast (CDN edge)	Slower (server compute)
Page freshness	Updated at build	Always fresh
Infrastructure cost	Very low (static hosting)	Requires active server
Scalability	Trivially infinite (CDN)	Requires horizontal scaling
Cold-start concern	None	Present for serverless SSR
Build time	Grows with page count	No build time

Incremental Static Regeneration (ISR)

ISR is a hybrid approach popularised by Next.js. Pages are pre-built but can be refreshed on demand or on a schedule without a full rebuild:

// Next.js ISR — rebuild this page at most once every 60 seconds
export async function getStaticProps() {
  const data = await fetchLatestData();
  return { props: { data }, revalidate: 60 };
}

Hybrid Rendering with Astro

Modern frameworks like Astro allow hybrid rendering: pre-rendering 95% of your pages statically while configuring specific dynamic routes as server-rendered on demand.

// astro.config.mjs — enable hybrid rendering
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'hybrid',  // or 'server' for full SSR
  adapter: vercel(),
});

Mark individual pages as server-rendered:

---
// src/pages/dashboard.astro
export const prerender = false; // This page uses SSR
const user = Astro.locals.user;
---
<h1>Welcome, {user.name}</h1>

All other pages remain statically generated at build time.

Decision Framework

Ask these questions:

1. Does the page content change between user requests? Yes → SSR (or ISR if infrequent updates). No → SSG.

2. Does the page require authentication or session data? Yes → SSR. No → SSG.

3. How many pages are there? Thousands → SSG build times may become long; consider ISR.

4. What is the hosting budget? Minimal → SSG on a CDN is nearly free. Can invest in servers → SSR enables more dynamic features.