Server-Side vs Client-Side Rendering — When to Use What and Why

The Three Questions That Decide Everything

Before writing a single line, ask these about the page you're building:

1. Does Google need to index this page?
   → YES: Server-side

2. Does rendering this require a secret (DB, API key)?
   → YES: Server-side

3. Is this behind a login where SEO doesn't matter?
   → YES: Client-side

Most pages answer one of these clearly. The ones that don't are hybrid — server shell, client interactivity.

Use Server-Side (SSR) For These

• ▸E-commerce — product pages, category listings, search results. Google must index them. Pricing comes from a DB the browser shouldn't touch directly.
• ▸Marketing and landing pages — homepage, pricing, features, blog. Public, crawlable, SEO-critical. No argument for CSR here.
• ▸Social platforms — public profiles, post pages, shared links. Open Graph previews break on CSR. When someone shares a link on WhatsApp, the preview must work.
• ▸News and media — every article must load instantly and rank in Google News.
• ▸Auth pages — login, signup, password reset. Server checks session state and redirects before the page renders — no flash of wrong content.

// Next.js SSR — e-commerce product page
// DB call happens on the server. Google reads the full page. No API key in the browser.
export default async function ProductPage({ params }) {
  const product = await db.products.findById(params.id);
  if (!product) notFound();

  return (
    <>
      <ProductTitle title={product.title} />        {/* server rendered */}
      <ProductImages images={product.images} />     {/* server rendered */}
      <AddToCartButton productId={product.id} />    {/* client component */}
    </>
  );
}

Use Client-Side (CSR) For These

• ▸Admin panels — always behind auth, never crawled by Google, intensely interactive. A React SPA is the right call. Always.
• ▸Internal dashboards — analytics, reporting, data tables with filters and sorting. The UI reacts to user input constantly. SSR would be pointlessly slow here.
• ▸Real-time tools — Figma-like editors, Trello boards, live chat, collaborative docs. State lives on the client and syncs over WebSocket.
• ▸The authenticated product in a SaaS — once logged in, SEO stops mattering. Fast client-side navigation between views is more important.

// CSR — Admin panel (React SPA, Vite or CRA)
// Behind /admin. Always authenticated. Google never sees this.
// SSR adds zero value here.
function OrdersTable() {
  const [filters, setFilters] = useState({});
  const { data } = useQuery(["orders", filters], () => fetchOrders(filters));

  return (
    <DataTable
      data={data}
      onFilter={setFilters}   // instant client-side filter
      onSort={setSort}         // no network round trip
    />
  );
}

Most Real Apps Are Both — The Hybrid

A SaaS product is the clearest example:

app/
├── (marketing)/          ← SSR  — public, crawlable, SEO matters
│   ├── page.tsx               homepage
│   ├── pricing/page.tsx       pricing
│   └── blog/[slug]/page.tsx   articles
│
└── (dashboard)/          ← CSR  — behind auth, SEO irrelevant
    ├── dashboard/page.tsx
    ├── projects/[id]/page.tsx
    └── settings/page.tsx

Same codebase, same framework (Next.js), different rendering strategy per section — not per app.

Quick Reference

Product type          Rendering    Reason
────────────────────────────────────────────────────────
E-commerce store      SSR          SEO + DB queries
Marketing site        SSR          SEO always
News / blog           SSR          SEO + fast first load
Social profiles       SSR          SEO + link previews
Admin panel           CSR          Behind auth, interactive
Internal dashboard    CSR          Behind auth, real-time
SaaS marketing site   SSR          SEO
SaaS product (app)    CSR          Behind auth, SPA feel
Real-time tool        CSR          WebSocket, live state
Auth pages            SSR          Server session check

The One-Line Rule

If Google needs to read it or a secret is involved — server. If it lives behind a login and needs to feel instant — client.

Everything else is a hybrid of both — and in 2026 with React Server Components, you can mix them at the component level within a single page without switching frameworks.