HIGHPerformancemediumNext.js

Prefer Server Components Over Client Components

Only add "use client" when a component needs hooks, event handlers, or browser APIs. Every unnecessary "use client" directive ships the component and all its dependencies to the browser as additional JavaScript — slowing down page loads, increasing bandwidth costs, and degrading the experience for users on slow connections or low-powered devices.

Why This Matters

Every "use client" directive adds the component and all its dependencies to the client JavaScript bundle. Unnecessary client components increase page load time, Time to Interactive (TTI), and bandwidth usage. On large applications this can add hundreds of kilobytes of avoidable JavaScript.

Related Rules

Add Error Boundaries Around Unreliable Content

Architecture

MEDIUM

Break Up God Components Into Focused, Composable Units

Architecture

MEDIUM

Use next/image Instead of Raw img Tags

Performance

HIGH

Always Return Cleanup Functions from useEffect

Performance

HIGH

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and 3+ others. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

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:

Does this file use React hooks? If not, remove "use client".
Does this file use event handlers? If only one small part needs interactivity, extract it.
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

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