Server Side Rendering(SSR) in React for SEO
I spent hours wondering why my beautifully crafted React app wasn’t showing up on Google. The UI worked flawlessly, performance was decent, but search engines saw almost nothing. The fix? A small shift in how rendering happens. In this article, you’ll learn how Server Side Rendering(SSR) in React solves SEO issues, how to implement it with real code, and how tools like @power-seo can simplify the process without turning your project upside down.
Why React Apps Struggle with SEO
React apps typically rely on client-side rendering (CSR). That means the browser downloads a mostly empty HTML file, then JavaScript builds the UI.
Search engines can execute JavaScript, but not always reliably or quickly. This leads to:
Missing metadata
Delayed indexing
Poor ranking
Example: CSR Output
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
There’s no meaningful content for crawlers upfront.
What SSR Changes
With SSR, the server sends fully rendered HTML:
<div id="root">
<h1>Welcome to My Site</h1>
<p>This content is visible to search engines.</p>
</div>
Result
Faster indexing
Better SEO ranking
Improved social previews
Building a Minimal SSR Setup in React
Let’s create a simple SSR setup using Node.js and React.
Step 1: Install Dependencies
npm install express react react-dom
Step 2: Create Server
// server.js
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
const app = express();
const App = () => {
return (
<div>
<h1>SSR in React</h1>
<p>This content is rendered on the server.</p>
</div>
);
};
app.get("/", (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>SSR Example</title>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log("Server running on http://localhost:3000");
});
Result
When you visit the page, the HTML already contains your content. No waiting for JavaScript execution.
Adding Dynamic Meta Tags for SEO
Rendering HTML is only half the battle. SEO also depends heavily on meta tags.
Problem
React apps often fail to dynamically update:
<title><meta description>Open Graph tags
Solution with SSR
app.get("/blog", (req, res) => {
const title = "My Blog Post";
const description = "This is an SEO-friendly SSR page.";
const html = renderToString(
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
<meta name="description" content="${description}" />
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`);
});
Result
Search engines see correct metadata instantly
Social sharing previews work properly
Scaling SSR Without Losing Your Mind
Manual SSR works, but scaling it becomes painful:
Managing routes
Injecting SEO tags
Keeping hydration in sync
This is where abstraction helps.
Example Using @power-seo
Instead of manually injecting everything, you can centralize SEO logic.
npm install @cybercraftbd/power-seo
import { generateSEO } from "@cybercraftbd/power-seo";
app.get("/product/:id", (req, res) => {
const product = {
name: "Laptop X",
description: "High performance laptop"
};
const seo = generateSEO({
title: product.name,
description: product.description,
});
const html = renderToString(
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
</div>
);
res.send(`
<!DOCTYPE html>
<html>
<head>
${seo}
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`);
});
Result
Cleaner code
Reusable SEO logic
Less chance of missing critical tags
If you want to explore how this fits into a real workflow, I wrote more details here: https://ccbd.dev/blog/server-side-rendering-ssr-in-react-for-seo
And the package itself is available on npm: https://www.npmjs.com/package/@cybercraftbd/power-seo
What I Learned / Key Takeaways
SSR is not optional for SEO-heavy apps If your content matters for search engines, CSR alone isn’t enough
Start simple before adopting frameworks A minimal Express + React SSR setup teaches you more than jumping straight into Next.js
Meta tags are just as important as content Rendering HTML isn’t enough, you must control
<head>properlyAbstraction saves time at scale Tools like
@power-seodon’t replace knowledge, they reduce repetition and mistakes
If you want to try this approach, here's the repo: https://github.com/CyberCraftBD/power-seo
