SSG SSR and ISR
Statically generate pages at build time, server-render them per request, or revalidate cached pages on a schedule with Incremental Static Regeneration.
SSG SSR and ISR is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Three Rendering Strategies
Next.js supports three ways to render pages: SSG (Static Site Generation), SSR (Server-Side Rendering), and ISR (Incremental Static Regeneration). Each has different tradeoffs.
SSG — Build Time Generation
Pages are generated as static HTML at build time and served from a CDN. Fastest possible delivery. Best for: marketing pages, blogs, documentation.
SSG in Pages Router
Export getStaticProps from a page. The function runs at build time and provides props to the component.
// pages/blog/[slug].tsx
export async function getStaticPaths() {
const slugs = await fetchAllSlugs();
return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}
export async function getStaticProps({ params }) {
const post = await fetchPost(params.slug);
return { props: { post } };
}SSG in App Router
By default, async Server Components fetch at build time. Use generateStaticParams for dynamic routes.
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await fetchAllPosts();
return posts.map(p => ({ slug: p.slug }));
}
export default async function Post({ params }) {
const post = await fetchPost(params.slug);
return <article>{post.body}</article>;
}SSR — Per-Request Generation
Pages are rendered on every request. Use when content is per-user or changes too often for caching.
SSR in Pages Router
Export getServerSideProps.
// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
const userId = req.cookies.userId;
const data = await fetchUserDashboard(userId);
return { props: { data } };
}SSR in App Router
Force per-request rendering with dynamic = 'force-dynamic' or by reading cookies/headers (which auto-opts out of static).
// app/dashboard/page.tsx
import { cookies } from 'next/headers';
export default async function Dashboard() {
const userId = cookies().get('userId')?.value;
const data = await fetchUserDashboard(userId);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
// Or explicit:
export const dynamic = 'force-dynamic';ISR — Best of Both
ISR: serve a static page, but regenerate it in the background every N seconds. Combines SSG's speed with fresh-ish data.
ISR in Pages Router
Add revalidate to getStaticProps.
export async function getStaticProps() {
const posts = await fetchPosts();
return {
props: { posts },
revalidate: 60 // regenerate at most every 60 seconds
};
}ISR in App Router
Use next: { revalidate: N } on fetch options, or set export const revalidate = N on a page.
// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
.then(r => r.json());
// Option B: whole page
export const revalidate = 60;
export default async function Page() {
const posts = await fetch('https://api/posts').then(r => r.json());
return <Feed posts={posts} />;
}On-Demand Revalidation
Trigger regeneration manually (e.g. from a CMS webhook) without waiting for the time interval.
// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';
export async function POST(req) {
const { slug } = await req.json();
revalidatePath(`/blog/${slug}`);
return Response.json({ revalidated: true });
}Choosing the Right Strategy
Use SSG when data changes rarely (marketing, docs, blog). Use ISR when data updates occasionally (CMS-driven sites, e-commerce listings). Use SSR for per-user content (dashboards, account pages).
Quick Check
What does ISR (Incremental Static Regeneration) do that pure SSG doesn't?
Recap: SSG, SSR, ISR
SSG: build-time, fastest, fixed content. SSR: per-request, dynamic, slower. ISR: SSG + scheduled background regeneration — fresh-ish + fast. Pages Router uses getStaticProps/getServerSideProps. App Router uses async Server Components with fetch revalidate or page-level revalidate constant. revalidatePath/Tag for on-demand updates.
Frequently asked questions
Is the “SSG SSR and ISR” lesson free?
Yes — the full text of “SSG SSR and ISR” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “SSG SSR and ISR”?
Statically generate pages at build time, server-render them per request, or revalidate cached pages on a schedule with Incremental Static Regeneration. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “SSG SSR and ISR” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.