# Nextjs Server Components

> When building Next.js App Router pages and deciding between Server and Client Components.

- Skill: `majiayu000/nextjs-server-components-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nextjs-server-components-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nextjs-server-components-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nextjs-server-components-2

---


## When to Use
When building Next.js App Router pages and deciding between Server and Client Components.

## Patterns

### Default: Server Components
```tsx
// app/page.tsx - Server Component by default
async function Page() {
  const data = await db.query('SELECT * FROM posts');
  return <PostList posts={data} />;
}

// ✅ Direct DB/API access
// ✅ Secrets safe (never sent to client)
// ✅ Zero client JS for this component
```

### Client Component ("use client")
```tsx
'use client'
// Only add when you NEED:
// - useState, useEffect, useContext
// - Event handlers (onClick, onChange)
// - Browser APIs (localStorage, window)

import { useState } from 'react';

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

### Composition Pattern
```tsx
// Server Component (parent)
async function Dashboard() {
  const user = await getUser();
  return (
    <div>
      <UserInfo user={user} />       {/* Server */}
      <InteractiveChart />           {/* Client */}
    </div>
  );
}

// Pass server data to client as props
<ClientComponent initialData={serverData} />
```

### Data Fetching in Server Components
```tsx
// ✅ Parallel fetching
async function Page() {
  const [posts, user] = await Promise.all([
    getPosts(),
    getUser()
  ]);
  return <Feed posts={posts} user={user} />;
}
```

## Anti-Patterns
- Adding "use client" to every component (defeats RSC benefits)
- Importing server-only code in client components
- Passing functions as props from Server to Client
- Using useEffect for data that could be fetched on server

## Verification Checklist
- [ ] "use client" only where actually needed
- [ ] No secrets in client components
- [ ] Server data passed as serializable props
- [ ] Parallel data fetching where possible