Server-Side Rendering (SSR)
The server builds the finished HTML for each request, so the browser paints real content instead of an empty div waiting on JavaScript.
See it
What it is
SSR means the HTML in the response is built on the server: it runs your components, fetches the data, and sends back finished markup. The visitor sees real content before any JavaScript downloads, and crawlers, link previews, and slow phones all get something useful immediately. What happens after that is a separate architectural choice, not part of the definition. The page might run the same components in the browser to attach handlers (hydration), it might hydrate a few interactive islands and leave the rest as plain markup, or it might ship no component JavaScript at all. Next.js, Remix, Nuxt, and SvelteKit can all render per request, each with its own defaults per route.
Reach for SSR when a page is personalized or changes per request: dashboards, logged-in views, search results, live inventory and pricing. If every visitor would get identical bytes, static generation is cheaper and faster. Streaming with Suspense boundaries lets you send the shell instantly and fill slow regions in as their data lands.
Two real costs. Time to first byte now depends on your slowest query, so one sluggish API makes the whole page late. And your render code runs in two environments, so anything touching window, localStorage, Math.random, or Date.now during render can produce a hydration mismatch, where the server markup and the client render disagree. React logs the mismatch and may regenerate the affected subtree in the browser, so the visible damage ranges from nothing to a flicker to a whole section rebuilt.
Ask AI for it
Convert this page to server-side rendering: fetch its data on the server per request and return complete HTML including all above-the-fold content before any client JavaScript runs. Move browser-only code (window, localStorage, random values, current time) out of render or behind an effect so the server and the client produce matching initial markup. Wrap slow data regions in Suspense boundaries with skeleton fallbacks so the shell streams first, and set explicit cache headers for anything that is not user-specific.