Server-Side Rendering (SSR) means the server generates the initial HTML for a page (running your component tree and data fetching on the server). The browser receives full HTML, so the content is visible and indexable immediately—good for SEO and perceived performance. Client-Side Rendering (CSR) means the server sends a minimal HTML and a JS bundle; the browser runs JS to fetch data and render the page. The initial load can show a blank or loading state until JS runs.

SSR gives a fast First Contentful Paint and better SEO because the content is in the HTML. The trade-off is server cost (every request runs server code) and complexity (you need a Node/server runtime that can render your components).

After the server sends HTML, the client loads the same component tree and attaches to the existing DOM—this is hydration. React (and similar) "take over" the server-rendered nodes: event listeners are attached, client-only state and effects run. The user sees the server HTML first; then the page becomes interactive without a full re-render. If the client and server produce different output for the same props, you get hydration mismatch errors, so SSR and client must be consistent for the initial tree.

Streaming SSR: The server can send HTML in chunks (e.g. shell first, then data-driven content as it resolves). The browser can paint the shell early and fill in the rest. Next.js App Router uses this pattern with Suspense.

SSR: Render on each request. Good for personalized or frequently changing content. SSG (Static Site Generation): Render at build time; serve pre-built HTML. Good for blogs, docs, marketing pages. CSR: Render only in the browser. Good for dashboards and apps that do not need SEO. Many apps mix: some pages SSG, some SSR, some CSR. Next.js lets you choose per page or segment.

Hydration mismatch: If the server-rendered HTML does not match what the client would render (e.g. different date format, random ID, or browser-only API used during render), React will warn or error. Fix by ensuring the initial render is deterministic and that client-only code (window, localStorage) runs only in useEffect or after a client check. Client-only components: For parts that cannot run on the server (e.g. a chart library that uses window), mark them as client-only and render a placeholder on the server so the shell still matches.