Server-Side Rendering

🎤 Interview Answer"SSR renders the page on the server for every request. Unlike SSG, the HTML is generated fresh each time, so it's always up-to-date. I'd use it for pages with personalized content, auth-gated data, or anything that needs request-time context like cookies or headers."

// Force SSR by opting out of caching
export const dynamic = "force-dynamic";
// OR use: fetch('url', { cache: 'no-store' })

import { cookies, headers } from "next/headers";

export default async function SSRPage() {
  // Access request-scoped data
  const cookieStore = cookies();
  const token = cookieStore.get("session");

  // Fetch user-specific data
  const user = await getUserById(token?.value);

  return <Dashboard user={user} />;
}

export async function getServerSideProps(context) {
  const { req, res, params } = context;
  const token = req.cookies.session;
  const user = await getUser(token);
  return { props: { user } };
}

// SSG: runs ONCE at build time
const data = await fetch("https://api.example.com/data");
// cache: 'force-cache' (default) ↑

// SSR: runs on EVERY request
const data = await fetch("https://api.example.com/data",
  { cache: "no-store" }  // ← this one line changes everything
);