What is SSR (Server-Side Rendering) in Next.js?

Server-Side Rendering (SSR) generates the HTML for a page on the server for each request. The server fetches data, renders the React component to HTML, and sends it to the browser. The browser then hydrates the HTML with React for interactivity. Pages Router SSR: export getServerSideProps from a page: export async function getServerSideProps(context) { const { params, req, res, query } = context; const data = await fetchData(params.id); if (!data) return { notFound: true }; return { props: { data } }; } export default function Page({ data }) { return <div>{data.title}</div>; }. App Router SSR: by default, App Router fetches data in Server Components (which IS SSR) — just use async/await in the component. Dynamic rendering (per-request) vs static rendering (at build time) is determined by the data fetching options. Force dynamic: export const dynamic = "force-dynamic". Benefits of SSR: always fresh data (fetched per request); can use request-specific data (cookies, headers, user session); good SEO (fully rendered HTML); secure (data fetching on server). Drawbacks: slower than static — every request triggers server rendering; higher server load; Time to First Byte (TTFB) is longer than static files. Use SSR for: personalized pages (user dashboard), real-time data (stock prices), pages where fresh data is critical. Use SSG for: blogs, marketing pages, documentation.