What is Server-Side Rendering
Server-side rendering
SSR (Server-Side Rendering) is a technique for rendering web pages on the server before sending them to the client, ensuring fast loading and SEO optimization.
How It Works
- Server receives request from browser
- Generates complete HTML page
- Sends ready HTML to client
- Browser displays content instantly
- JavaScript "hydrates" page for interactivity
Advantages
- Fast first contentful paint (FCP)
- Excellent SEO optimization
- Works without JavaScript
- Better social media metadata
- Better for slow devices
Disadvantages
- Server load
- Time to interactive (TTI)
- Caching complexity
- Higher infrastructure costs
Comparison with CSR
- SSR: HTML generated on server
- CSR: HTML generated in browser
- SSG: HTML generated at build time
Frameworks with SSR
- Next.js (React)
- Nuxt.js (Vue)
- SvelteKit (Svelte)
- Angular Universal
- Remix
When to Use
- Content sites and blogs
- E-commerce
- News portals
- SEO-critical websites