Server-Side Rendering, Static Site Generation, Incremental Static Regeneration, Islands Architecture, Streaming SSR, and React Server Components. Covers Next.js, Nuxt, Remix, SvelteKit, and Astro in depth.
USE FOR: server-side rendering, SSG, ISR, Islands Architecture, streaming SSR, React Server Components, Next.js, Nuxt, Remix, SvelteKit, Astro, choosing between SSR vs SSG vs ISR
DO NOT USE FOR: client-only SPAs (use spa), progressive web apps (use pwa), micro-frontend composition (use micro-frontends)
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/Tyler-R-Kendrick/agent-skills --skill ssr
La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Server-Side Rendering, Static Site Generation, Incremental Static Regeneration, Islands Architecture, Streaming SSR, and React Server Components. Covers Next.js, Nuxt, Remix, SvelteKit, and Astro in depth.
USE FOR: server-side rendering, SSG, ISR, Islands Architecture, streaming SSR, React Server Components, Next.js, Nuxt, Remix, SvelteKit, Astro, choosing between SSR vs SSG vs ISR
DO NOT USE FOR: client-only SPAs (use spa), progressive web apps (use pwa), micro-frontend composition (use micro-frontends)
[{"title":"web.dev — Rendering on the Web","url":"https://web.dev/articles/rendering-on-the-web"},{"title":"Next.js Documentation","url":"https://nextjs.org/docs"}]
Server-Side Rendering (SSR)
Overview
Server-Side Rendering generates HTML on the server for each request, sending a fully-formed page to the browser. The client then "hydrates" the HTML — attaching event listeners and making it interactive. SSR combines the SEO and fast First Contentful Paint of traditional server-rendered pages with the rich interactivity of Single Page Applications. Beyond classic SSR, the modern landscape includes SSG, ISR, Islands Architecture, Streaming SSR, and React Server Components — each a different point on the spectrum between server and client rendering.
Rendering Strategies
┌──────────────────────────────────────────────────────────────────┐
│ Rendering Strategy Spectrum │
│ │
│ SSG ──────▶ ISR ──────▶ SSR ──────▶ Streaming ──────▶ RSC │
│ │
│ Build-time Build-time Per-request Per-request Server- │
│ HTML + revalidate HTML on HTML streamed only │
│ Static CDN on demand every req progressively components│
└──────────────────────────────────────────────────────────────────┘
SSR — Server-Side Rendering
HTML is rendered on the server for every request. The client receives a complete page, then hydrates it with JavaScript for interactivity.
Browser request → Server renders HTML → Browser displays HTML → JS loads → Hydration → Interactive
SSG — Static Site Generation
HTML is rendered at build time. Pages are pre-generated as static files and served from a CDN. Content is only as fresh as the last build.
Build step → HTML files generated → Deployed to CDN → Browser requests static file → Instant response
ISR — Incremental Static Regeneration
A hybrid of SSG and SSR. Pages are statically generated but revalidated in the background after a configurable time interval. First popularized by Next.js.
First request → Serve cached static page → Background revalidation → Next request gets fresh page
Islands Architecture
The page is mostly static HTML with isolated "islands" of interactivity. Only the interactive components ship JavaScript and hydrate independently. The rest of the page is zero-JS static HTML.
┌───────────────────────────────────────────────────┐
│ Static HTML (no JS) │
│ ┌─────────────┐ ┌──────────────┐ │
│ │ Island: │ │ Island: │ │
│ │ Search Bar │ Static text │ Add to Cart │ │
│ │ (hydrated) │ and images │ (hydrated) │ │
│ └─────────────┘ (no JS) └──────────────┘ │
│ │
│ Static HTML (no JS) │
│ ┌──────────────────────────────────────────────┐ │
│ │ Island: Image Carousel (hydrated) │ │
│ └──────────────────────────────────────────────┘ │
│ Static HTML (no JS) │
└───────────────────────────────────────────────────┘
Streaming SSR
Instead of waiting for the entire page to render, the server streams HTML to the browser as it becomes ready. React 18 Suspense boundaries define streaming chunks — fast parts render first, slow parts (data fetching) stream in later.
Server starts streaming HTML →
[Header renders immediately]
[Main content streams as data resolves]
[Suspense fallback replaced by real content]
[JavaScript hydrates progressively]
React Server Components (RSC)
A paradigm shift: components that run only on the server and never ship JavaScript to the client. RSC can directly access databases, filesystems, and server-only APIs. Client Components (marked with 'use client') handle interactivity and ship JS. The two compose seamlessly in the same component tree.
<!-- src/routes/products/+page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<h1>Products</h1>
{#each data.products as product}
<div>
<h2>{product.name}</h2>
<form method="POST" action="?/addToCart" use:enhance>
<input type="hidden" name="productId" value={product.id} />
<button>Add to Cart</button>
</form>
</div>
{/each}
// Per-route rendering strategy// src/routes/blog/+page.tsexportconst prerender = true; // SSG — generate at build time// src/routes/dashboard/+page.tsexportconst ssr = false; // SPA — client-only rendering// src/routes/products/+page.ts// Default: SSR per request
Astro (Islands Architecture)
Astro renders pages as static HTML by default and ships zero JavaScript unless you explicitly opt in with interactive islands. Components from any framework (React, Vue, Svelte, Solid) can be used as islands.
---
// src/pages/products.astro — Server-side (runs at build/request time)
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro'; // Static, no JS
import SearchBar from '../components/SearchBar.tsx'; // React island
import CartWidget from '../components/CartWidget.vue'; // Vue island
const products = await fetch('https://api.example.com/products').then(r => r.json());
---
<Layout title="Products">
<!-- This React component hydrates on the client (interactive island) -->
<SearchBar client:load />
<!-- Static HTML, no JavaScript shipped -->
<div class="product-grid">
{products.map((product) => (
<ProductCard product={product} />
))}
</div>
<!-- Vue component hydrates only when visible in viewport -->
<CartWidget client:visible />
</Layout>
Astro Client Directives
Directive
Hydration Strategy
client:load
Hydrate immediately on page load
client:idle
Hydrate when browser is idle (requestIdleCallback)
client:visible
Hydrate when component enters viewport (IntersectionObserver)
client:media="(min-width: 768px)"
Hydrate when media query matches
client:only="react"
Client-render only, skip SSR entirely
(no directive)
No hydration — renders as static HTML with zero JS
ProductDetail streams in when its data resolves (100ms)
ReviewsSkeleton shows while reviews load
ProductReviews streams in when reviews resolve (500ms)
Footer renders immediately
Best Practices
Default to SSG for content that does not change per request — it is the fastest and cheapest strategy.
Use ISR for content that changes but does not need to be real-time (product catalogs, blog posts) — you get CDN speed with eventual freshness.
Reserve full SSR for personalized or authenticated content that must be fresh on every request.
Use streaming SSR to avoid blocking the entire page on the slowest data source — Suspense boundaries let fast parts render immediately.
Prefer React Server Components for data fetching — they eliminate client-server waterfalls and ship zero JS for non-interactive UI.
Consider Astro's Islands Architecture for content-heavy sites — shipping zero JS by default and hydrating only interactive components is a dramatic performance win.
When using SSR, cache aggressively at the CDN/edge layer — not every request needs to hit your origin server.
Avoid hydration mismatches — the server-rendered HTML and client render must produce identical output, or React will throw errors and re-render the entire tree.
Test with JavaScript disabled to verify your SSR output is meaningful — if the page is blank without JS, your SSR is not doing its job.
