Next.js Rendering Strategies
A hands-on POC: the same JSONPlaceholder data, fetched four different ways. Open each route, refresh it a few times, and watch how the timestamp behaves - that difference is the whole point.
Client-Side Rendering
What: The page ships empty and fetches data in the browser after mount.
When to use: Highly interactive, user-specific, or frequently changing data that doesn't need SEO.
"use client" + useEffect
Static Site Generation
What: The page is rendered once at build time and served as static HTML.
When to use: Content that rarely changes, like marketing pages or docs.
fetch(url, { cache: "force-cache" })
Server-Side Rendering
What: The page is rendered on the server on every single request.
When to use: Data that must always be fresh, such as a dashboard or personalized page.
fetch(url, { cache: "no-store" })
Incremental Static Regeneration
What: The page is served statically but regenerates in the background after a set interval.
When to use: Content that changes periodically but doesn't need to be fresh on every request, like a blog.
fetch(url, { next: { revalidate: seconds } })