Prefer Server Components Over Client Components

Why this matters

In Next.js App Router, components are Server Components by default. Adding "use client" at the top of a file opts that component (and its entire import subtree) into the client bundle. This means:

• The component's JavaScript is shipped to the browser
• All dependencies of that component are also bundled client-side
• The component must be hydrated before it becomes interactive

Unnecessary "use client" directives are the leading cause of bloated Next.js bundles.

The rule

Only add "use client" when the component genuinely needs one of:

• React hooks (useState, useEffect, useRef, etc.)
• Event handlers (onClick, onChange, onSubmit, etc.)
• Browser-only APIs (window, document, localStorage, etc.)
• Third-party libraries that require client-side rendering

If the component only renders data, use a Server Component.

Bad example

"use client"; // Unnecessary!
 
import { formatDate } from "@/lib/utils";
 
export function ArticleCard({ title, date, excerpt }: ArticleCardProps) {
  return (
    <div className="rounded-lg border p-4">
      <h2>{title}</h2>
      <time>{formatDate(date)}</time>
      <p>{excerpt}</p>
    </div>
  );
}

This component has no hooks, no event handlers, and no browser APIs. It should be a Server Component.

Good example

// No "use client" — this is a Server Component
import { formatDate } from "@/lib/utils";
 
export function ArticleCard({ title, date, excerpt }: ArticleCardProps) {
  return (
    <div className="rounded-lg border p-4">
      <h2>{title}</h2>
      <time>{formatDate(date)}</time>
      <p>{excerpt}</p>
    </div>
  );
}

The composition pattern

When you need interactivity for a small part of a larger component, extract only the interactive part into a client component:

// article-page.tsx — Server Component
import { LikeButton } from "./like-button"; // Client Component
 
export async function ArticlePage({ id }: { id: string }) {
  const article = await getArticle(id); // Server-side data fetch
 
  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
      <LikeButton articleId={id} /> {/* Only this part is client-side */}
    </article>
  );
}

// like-button.tsx — Client Component (needs onClick + useState)
"use client";
 
import { useState } from "react";
 
export function LikeButton({ articleId }: { articleId: string }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "Unlike" : "Like"}
    </button>
  );
}

How to audit

Review every "use client" file and ask:

1. Does this file use React hooks? If not, remove "use client".
2. Does this file use event handlers? If only one small part needs interactivity, extract it.
3. Does this file import a client-only library? If so, "use client" is justified.

grep -rn '"use client"' app/ components/ --include="*.tsx" --include="*.ts"

Remediation

1. Remove "use client" from components that don't need it
2. Extract interactive parts into small client components
3. Use the next/bundle-analyzer to measure the impact
4. Set up a bundle size budget in CI

References

• Next.js Server Components
• React Server Components RFC