Mastering Server Components: When to Use Server vs Client in Next.js 14+

Confused about 'use client'? Learn the mental model for splitting your app into server and client components for maximum performance.

zahid ansari

Building scalable systems by applying mental models to code and architecture.

General

Website

Resources

Install this app to stay connected and in the loop.

Building meaningful experiences one pixel at a time 😉.

Made with by Zahid

views

Mastering Server Components in Next.js 14+

Next.js 13+ introduced a paradigm shift with React Server Components (RSC). It's powerful, but it introduced a new question for every component: "Should this be a Client or Server Component?"

The Problem I Faced

I initially migrated a dashboard app and made everything

"use client"

just to make errors go away. The app worked, but I lost all the performance benefits of RSC—fetching data was slower, and the bundle size remained huge.

Understanding the Split

Server Components (Default): Fetch data, access backend resources, keep sensitive keys safe, reduce client bundle size.
Client Components (
1"use client"
): Handle interactivity (onClick, onChange), use React hooks (useState, useEffect), use browser APIs.

Code Example 1: The Server Component (Data Fetching)

// app/dashboard/page.tsx
// Defaults to Server Component
import { db } from "@/lib/db";
import ProjectList from "./project-list";

export default async function DashboardPage() {
  // Direct database access! No generic API needed.
  const projects = await db.project.findMany();

  return (
    <main>
      <h1>My Projects</h1>
      {/* Pass data to client component */}
      <ProjectList initialProjects={projects} />
    </main>
  );
}

Code Example 2: The Client Component (Interactivity)

"use client";

import { useState } from "react";

export default function ProjectList({ initialProjects }) {
  const [projects, setProjects] = useState(initialProjects);

  return (
    <div>
      {projects.map(p => (
        <div key={p.id} onClick={() => alert(p.name)}>
          {p.name}
        </div>
      ))}
    </div>
  );
}

Common Pitfalls

Mistake 1: Importing Server Components into Client Components.
- Don't: Import a heavy server component directly inside a client file (it effectively becomes a client component or breaks).
- Do: Pass Server Components as
  1children
  props to Client Components.

Pro Tips

Leaf Interaction: Push the "Client Boundary" as far down the tree as possible. Only the specific button or form needs to be client-side.
Composition: Use the
1children
pattern to wrap server parts inside client context providers without converting everything.

Wrapping Up

Mastering this split is the key to building fast Next.js apps. Fetch on the server, interact on the client.

Tech Stack: Next.js, React, Server Components