Normally, React apps use Client-Side Rendering (CSR) — the browser downloads a blank HTML file and then JavaScript renders the UI dynamically.
In Server-Side Rendering (SSR):
The React app is rendered on the server into an HTML string, which is then sent to the browser.
The browser displays that HTML immediately and then React “hydrates” it — attaching event listeners and making it interactive.
🧩 Flow of SSR
- User requests a page →
- Server runs React code →
- Server generates HTML markup →
- Sends HTML to the client →
- Browser displays it instantly →
- React hydrates (activates interactivity with JS).
💻 Example: Simple SSR Setup
Using Next.js (the most common SSR framework for React):
// pages/index.js
export async function getServerSideProps() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await res.json();
return { props: { posts } };
}
export default function Home({ posts }) {
return (
<div>
<h1>Blog Posts</h1>
<ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
</div>
);
}
✅ The page’s HTML (with posts already loaded) is generated on the server before being sent to the user.
⚡ How SSR Differs from CSR
| Feature | Client-Side Rendering | Server-Side Rendering |
|---|---|---|
| Rendering location | Browser | Server |
| Initial page load | Slower (waits for JS) | Faster (HTML pre-rendered) |
| SEO | Poor (HTML empty before JS runs) | Excellent (content visible to crawlers) |
| Performance | Good after load | Fast first paint |
| Use case | SPAs, dashboards | Blogs, e-commerce, landing pages |
💪 Benefits of Server-Side Rendering
1. 🕵️♂️ Better SEO
Search engine crawlers can easily read fully rendered HTML — perfect for blogs, product pages, and marketing sites.
2. ⚡ Faster First Paint
Users see meaningful content faster (no white screen while JS loads).
3. 📱 Improved Performance on Slow Devices
Because the server does the heavy lifting, low-end devices render faster.
4. 🔁 Content Available Without JS
Even if JavaScript is disabled or delayed, users still see the full HTML.
5. ♻️ Easier Social Media Sharing
Platforms like Twitter, LinkedIn, and Facebook show accurate previews since metadata (like <title> and <meta>) is part of the rendered HTML.
⚙️ How React Supports SSR
React provides server-rendering methods such as:
➤ renderToString()
Converts React components to an HTML string (used by frameworks like Next.js).
import { renderToString } from "react-dom/server";
import App from "./App";
const html = renderToString(<App />);
res.send(`<!DOCTYPE html><div id="root">${html}</div>`);
➤ hydrateRoot() (React 18+)
Used on the client to attach React’s event system to pre-rendered HTML.
import { hydrateRoot } from "react-dom/client";
hydrateRoot(document.getElementById("root"), <App />);
🧱 Summary
| Concept | Explanation |
|---|---|
| Definition | Rendering React components to HTML on the server before sending to the browser |
| Main Tools | Next.js, Remix, or Express + ReactDOMServer |
| Key Functions | renderToString(), hydrateRoot() |
| Benefits | Faster initial load, SEO-friendly, better UX on slow devices |
| Ideal For | Blogs, landing pages, e-commerce, content-heavy sites |
🧩 In short:
Server-Side Rendering (SSR) renders the React app on the server, sends pre-built HTML to the client, and then hydrates it — resulting in faster load times, better SEO, and improved user experience.
