What Is SSR?
Server-Side Rendering
SSR is a technique where the server generates the full HTML for a page on each request, rather than sending an empty page for JavaScript to fill in. This improves SEO, initial load speed, and social media previews.
How SSR Works
With SSR, when a user requests /products, the server runs your React/Vue code, fetches the data, renders the HTML, and sends the complete page. The browser displays content immediately. Then JavaScript hydrates the page to make it interactive.
Next.js, Nuxt, and SvelteKit all support SSR out of the box. The tradeoff is server load — every request requires server-side rendering, which costs compute time compared to serving static files.
Key Concepts
- Hydration — After the server-rendered HTML loads, JavaScript attaches event handlers to make it interactive
- Time to First Byte — SSR sends complete HTML quickly, improving TTFB compared to client-rendered SPAs
- Server Load — SSR requires compute resources per request — consider caching or SSG for high-traffic pages
Frequently Asked Questions
When should I use SSR vs SSG?
Use SSR for dynamic, personalized content that changes per user or frequently. Use SSG for content that's the same for everyone and doesn't change often — blogs, docs, marketing pages.
Does SSR replace SPAs?
Not exactly. Modern frameworks like Next.js combine SSR for the initial load with SPA-like client-side navigation afterward. You get the best of both worlds.