What is Server-Side Rendering (SSR)?
Server-side rendering generates a page's HTML on the server for each request, improving initial load speed and SEO.
Server-side rendering (SSR) is when a web page's HTML is generated on the server for each request and sent to the browser fully formed. The user sees content immediately, rather than waiting for JavaScript to build the page in the browser.
How It Works:
- The browser requests a page
- The server runs the app, fetches data, and renders HTML
- The complete HTML is sent to the browser and displayed
- JavaScript then "hydrates" the page to make it interactive
SSR vs. Client-Side Rendering:
- CSR: Browser downloads a mostly empty page, then JS builds it (slower first paint, great for apps)
- SSR: Server sends ready HTML (faster first paint, better SEO)
Benefits:
- Faster first contentful paint: Content appears sooner
- Better SEO: Crawlers see full HTML
- Works without JS: Baseline content still loads
Trade-offs:
- Server load: Rendering happens per request
- Complexity: Hydration and data-fetching need care
FAQ
How is SSR different from static site generation (SSG)?
SSG renders pages once at build time and serves the same HTML to everyone. SSR renders on each request, which is better for personalized or frequently changing content.
What is hydration?
Hydration is the process where client-side JavaScript attaches event handlers and state to the server-rendered HTML, making a static page interactive.