Next.js Rendering Strategies

The App Router introduces a new mental model for rendering. Understanding when to use each strategy is essential for performance and developer experience.

Server Components (Default)

Every component in the App Router is a Server Component by default. They render on the server and send HTML to the client.

Use when:

• Fetching data from a database or API
• Accessing server-only resources (env vars, filesystem)
• Keeping large dependencies off the client bundle
• Displaying static or infrequently-changing content

// app/posts/page.tsx — Server Component (default)
export default async function PostsPage() {
  const posts = await db.post.findMany();
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Cannot: Use hooks, browser APIs, event handlers, or state.

Client Components

Opt in with "use client" at the top of the file.

Use when:

• You need interactivity (onClick, onChange)
• You need React hooks (useState, useEffect, useRef)
• You need browser APIs (localStorage, IntersectionObserver)
• You use client-only libraries (chart libraries, animation)

"use client";
import { useState } from "react";
 
export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "Unlike" : "Like"}
    </button>
  );
}

Key rule: Client Components can import other Client Components, but they cannot import a Server Component directly. Instead, pass Server Components as children or other props.

Server Actions

Functions that run on the server but can be called from Client Components.

Use when:

• Form submissions
• Data mutations (create, update, delete)
• Any operation needing server-side resources triggered by user action

// app/actions.ts
"use server";
 
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  await db.post.create({ data: { title } });
  revalidatePath("/posts");
}

Decision Tree

1. Does it need interactivity or hooks? → Client Component
2. Does it fetch data or access server resources? → Server Component
3. Is it a form submission or mutation? → Server Action
4. Is it a leaf component with no data needs? → Server Component (smaller bundle)
5. Does it use a client-only library? → Client Component

Composition Pattern

Keep the Client Component boundary as small as possible:

// Server Component (page)
export default async function Page() {
  const data = await fetchData();
  return (
    <section>
      <h1>{data.title}</h1>
      <InteractiveWidget initialData={data.items} />
    </section>
  );
}

This fetches data on the server but delegates interactivity to a small Client Component.