Server-Side Rendering (SSR) is a technique where web pages are generated on the server for each request, then sent to the browser as fully-rendered HTML. This contrasts with client-side rendering, where the browser receives minimal HTML and JavaScript builds the page.
SSR vs. CSR (Client-Side Rendering)
Server-Side Rendering
- User requests page
- Server fetches data
- Server generates complete HTML
- Browser receives and displays immediately
- JavaScript adds interactivity
Client-Side Rendering
- User requests page
- Server sends minimal HTML + JavaScript
- Browser downloads JavaScript
- JavaScript fetches data
- JavaScript builds the page
Benefits of SSR
SEO
Search engines see complete content immediately. No waiting for JavaScript to execute.
Performance (First Paint)
Users see content faster because HTML is ready to display.
Social Sharing
Crawlers get proper meta tags and content for previews.
Accessibility
Content available even if JavaScript fails.
Lower Device Requirements
Server does the heavy lifting, not the user's device.
Drawbacks of SSR
Server Load
Every request requires server processing.
Slower Navigation
Page changes need new server requests (unless hydrated).
Complexity
More complex deployment and caching considerations.
Time to Interactive
Page is visible but may not be interactive until JavaScript loads.
SSR Frameworks
Next.js (React)
// This runs on the server
export async function getServerSideProps() {
const data = await fetchData();
return { props: { data } };
}
Nuxt (Vue)
Built-in SSR with Vue.js.
SvelteKit (Svelte)
SSR support for Svelte applications.
Related Rendering Strategies
Static Site Generation (SSG)
Pages generated at build time, not request time. Fastest option for content that doesn't change per request.
Incremental Static Regeneration (ISR)
Static pages that can be updated after build without full rebuild.
Streaming SSR
Send HTML in chunks as it's generated, rather than waiting for complete page.
Hydration
After SSR HTML loads, JavaScript "hydrates" the page to make it interactive.
When to Use SSR
- Content needs to be crawled for SEO
- Data changes frequently
- Content is personalized
- First paint performance is critical
When to Avoid SSR
- Highly interactive applications (dashboards, tools)
- Content doesn't need SEO
- Static content that doesn't change