<strong>Server-Side Rendering (SSR)</strong> is when the server generates the full HTML for each page before sending it to the browser. This provides faster initial load and better SEO, but requires more server resources.
The Restaurant Meal Analogy
SSR is like restaurant delivery—the server prepares the full meal (HTML) and delivers it ready to eat. You don't need to cook (render) anything; just consume it immediately.
Server (Restaurant)
Prepares everything
Delivery (HTTP)
Brings ready meal
Browser (Your Home)
Just eat it
Requests Page
Renders HTML
Displays Immediately
Browser requests page
User visits your website
Server fetches data
Queries database for content
Server renders HTML
React/Vue renders on server, not browser
Send complete HTML
Browser receives fully-formed page
Hydration
JavaScript makes the page interactive
Wrong
"SSR means no JavaScript in the browser"
Correct
SSR <strong>still uses JavaScript for interactivity</strong>. The server renders the initial HTML, then JavaScript 'hydrates' it to make it interactive. Best of both worlds.
Next.js blog with SSR:
Server renders blog post HTML with content
User sees content immediately (good for SEO)
JavaScript loads and makes comments/likes interactive
Faster perceived performance than CSR