Nextjs Server Components

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)

// 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)

"use client"

import { useState } from 'react'

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

Server Action

// 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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.