Server-Side Rendering

If an SPA is a box of ingredients you take home and cook yourself, SSR is a restaurant bringing the dish to your table ready to eat. The HTML the browser gets already has content, so the page shows up right away. Then JavaScript loads to make buttons and other interactions work. This step is called hydration.

SSR fits pages that need to be indexed by search engines and whose data may be different on every visit, like product detail pages and news pages. The difference from SSG is when the HTML gets built: SSR on every request, SSG at build time. Next.js and Nuxt are common SSR frameworks. The trade-off is that you need a server that's always running.

A common beginner error is a hydration mismatch: what the server rendered doesn't match the browser's first render. It's usually because the render used window, localStorage, the current time, or a random number.