SSR
Server-Side Rendering
ELI5 — The Vibe Check
SSR means the server builds your HTML before sending it to the user's browser. Instead of sending empty HTML and loading JavaScript, you send a fully-formed page. It's fast on first load and Google can read it, but your server has to do more work.
Real Talk
SSR generates HTML on the server per request, sends it to the client, then hydrates it with JavaScript for interactivity. Benefits include better SEO, faster Time-to-First-Byte, and good performance on slow devices. Tradeoffs include higher server load and hydration complexity.
Show Me The Code
// Next.js SSR per request
export async function getServerSideProps() {
const data = await fetch('https://api.example.com/posts');
return { props: { posts: await data.json() } };
}
When You'll Hear This
"Use SSR for pages with user-specific data that changes per request." / "SSR gives better SEO than a pure SPA."
Related Terms
CSR (Client-Side Rendering)
CSR means the browser downloads a mostly-empty HTML page plus a big JavaScript bundle, then builds the full page in the browser.
Hydration
Hydration is when a server-rendered HTML page comes alive in the browser.
ISR (Incremental Static Regeneration)
ISR is the best of both SSG and SSR. Pages are pre-built statically but can automatically rebuild themselves in the background after a set time.
Next.js
Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.
Nuxt
Nuxt is Vue on steroids. It's a meta-framework that adds SSR, SSG, file-based routing, auto-imports, and a full deployment pipeline on top of Vue.
SSG (Static Site Generation)
SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN.