Server-Side Rendering
A web rendering approach where HTML is generated on the server for each request before being sent to the client.
Also known as: SSR
Category: Techniques
Tags: web-development, rendering, performance, seo, frontend
Explanation
Server-Side Rendering (SSR) is a technique where web pages are rendered on the server rather than in the browser. When a user requests a page, the server generates the complete HTML, sends it to the browser, and the browser displays it immediately.
How It Works:
1. User requests a page
2. Server processes the request
3. Server fetches necessary data
4. Server renders HTML with data
5. Complete HTML sent to browser
6. Browser displays page immediately
7. JavaScript hydrates the page for interactivity
Advantages:
- Better SEO: Search engines can easily crawl fully-rendered HTML
- Faster First Contentful Paint (FCP): Users see content faster
- Better for slow devices: Less client-side processing required
- Social media sharing: Meta tags are present in initial HTML
- Accessibility: Content available without JavaScript
Disadvantages:
- Server load: Every request requires server processing
- Time to Interactive (TTI): Hydration delays interactivity
- Complexity: Requires Node.js server for many frameworks
- Caching challenges: Dynamic content harder to cache
SSR vs. Other Approaches:
- CSR (Client-Side Rendering): JavaScript generates HTML in browser
- SSG (Static Site Generation): HTML pre-generated at build time
- ISR (Incremental Static Regeneration): Hybrid approach with periodic regeneration
Popular SSR Frameworks:
- Next.js (React)
- Nuxt.js (Vue)
- SvelteKit (Svelte)
- Angular Universal
Related Concepts
← Back to all concepts