---

name: nextjs-server-components description: Next.js App Router Server Components, Client Components, layouts, data fetching, and Server Actions. Use when working with Next.js app directory, component boundaries, or data fetching patterns.

Next.js Server Components

Expert guidance for using Next.js Server Components effectively.

Quick Reference

What Do You Need?

1. Server vs Client - Choosing the right component type
2. Data fetching - Async components, caching, revalidation
3. Server Actions - Form handling, mutations
4. Patterns - Composition, prop drilling prevention
5. Streaming - Suspense boundaries, loading states

Specify a number or describe your Next.js component scenario.

Routing

Essential Principles

Default to Server Components: Only add "use client" when you genuinely need client-side features. This is the single most important Next.js best practice.

Server Components for: Data fetching, database queries, API calls, heavy computation, keeping sensitive tokens safe.

Client Components for: State (useState), effects (useEffect), browser APIs, event handlers, React hooks.

Push Client Components down: Move "use client" as deep in the tree as possible. Keep the root Server Component.

Common Issues

Code Patterns

Server Component (Default)

Copy// Good: Async Server Component
export default async function UserProfile({ userId }: { userId: string }) {
  const user = await fetchUser(userId)
  return <div>{user.name}</div>
}

Client Component (When Needed)

Copy"use client"

import { useState } from 'react'

export function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Server Action

Copy// Server Action in Server Component
async function createTodo(formData: FormData) {
  'use server'
  const title = formData.get('title') as string
  await db.todos.create({ title })
}

export default function Page() {
  return <form action={createTodo}>...</form>
}

Reference Index

Success Criteria

Components are correct when:

• Default to Server (no "use client" unless needed)
• "use client" only for interactivity, browser APIs, hooks
• Data fetching in Server Components, not useEffect
• Server Actions for mutations, not API routes
• Client boundaries pushed down as far as possible