Difference between SSR & CSR ?

Interview Answer (Short)

SSR (Server-Side Rendering) generates HTML on the server before sending it to the browser, which improves SEO and initial page load performance. CSR (Client-Side Rendering) sends minimal HTML and renders the UI in the browser using JavaScript. I typically use SSR for public-facing pages like job listings and blogs, and CSR for dashboards and admin modules where SEO is not required.

SSR vs CSR in React / Next.js

This is one of the most frequently asked React and Next.js interview questions.

Feature	SSR (Server-Side Rendering)	CSR (Client-Side Rendering)
HTML Generated	Server	Browser
Initial Load	Faster	Slower
SEO	Excellent	Poor to Average
Data Fetching	Before page reaches browser	After page loads
First Contentful Paint	Fast	Slower
Server Load	Higher	Lower
User Interaction	Slightly delayed hydration	Immediate after JS loads
Best For	SEO pages, blogs, job portals	Dashboards, admin panels

---

CSR (Client-Side Rendering)

Flow

Browser Request
      ↓
Server sends almost empty HTML
      ↓
Browser downloads JS
      ↓
React Executes
      ↓
API Call
      ↓
UI Rendered

Example

"use client";

import { useEffect, useState } from "react";

export default function Jobs() {
  const [jobs, setJobs] = useState([]);

  useEffect(() => {
    fetch("/api/jobs")
      .then(res => res.json())
      .then(data => setJobs(data));
  }, []);

  return (
    <>
      {jobs.map(job => (
        <p key={job.id}>{job.title}</p>
      ))}
    </>
  );
}

What Browser Receives Initially?

<div id="root"></div>

Data appears only after JavaScript executes.

Drawbacks

• Slower initial load
• SEO issues
• Search engines may not see content immediately

---

SSR (Server-Side Rendering)

Flow

Browser Request
      ↓
Server Fetches Data
      ↓
Server Creates HTML
      ↓
Browser Receives Ready HTML
      ↓
React Hydrates

Example (Next.js)

export default async function JobsPage() {
  const response = await fetch(
    "https://api.example.com/jobs",
    {
      cache: "no-store"
    }
  );

  const jobs = await response.json();

  return (
    <>
      {jobs.map((job: any) => (
        <p key={job.id}>{job.title}</p>
      ))}
    </>
  );
}

HTML Received by Browser

<p>React Developer</p>
<p>Node.js Developer</p>
<p>AI Engineer</p>

Content is already present.

---

Visual Difference

CSR

Request
  ↓
Empty HTML
  ↓
Download JS
  ↓
API Call
  ↓
Render Data

SSR

Request
  ↓
Server Fetch Data
  ↓
Generate HTML
  ↓
Send Ready Page

---

SEO Comparison

CSR

Source View:

<div id="root"></div>

Google may need to execute JavaScript first.

SSR

Source View:

<h1>AI Engineer Jobs</h1>
<p>Latest openings...</p>

Search engines can index content immediately.

---

When to Use CSR?

Good for:

• Admin Panels
• HRMS
• CRM
• Internal Dashboards
• Analytics Screens

Example:

admin.cybotrix.com

SEO is not important.

---

When to Use SSR?

Good for:

• Job Portals
• Blogs
• News Websites
• E-commerce Product Pages
• Landing Pages

Example:

jobs.cybotrix.com/job/react-developer

SEO is important.

---

In Your Next.js Job Portal

For:

/               Home
/jobs           Job List
/job/[slug]     Job Details

Use SSR.

Example:

export const dynamic = "force-dynamic";

or

fetch(url, {
  cache: "no-store"
});

For:

/admin
/profile
/dashboard

Use CSR.

Example:

"use client";

with useState() and useEffect().