AgentSkillsCN

nextjs-server-components

Next.js 16 中的 React Server Components 模式。涉及服务器与客户端边界、异步组件、数据获取、序列化规则以及 Suspense 流式渲染等。

SKILL.md
--- frontmatter
name: nextjs-server-components
description: React Server Components patterns for Next.js 16. Server vs Client boundaries, async components, data fetching, serialization rules, streaming with Suspense.
versions:
  nextjs: 16
  react: 19
user-invocable: true
references: references/rsc-patterns.md, references/streaming.md
related-skills: nextjs-16, nextjs-tanstack-query, react-19

Next.js Server Components

Server Components are the default rendering model in Next.js 16 with React 19.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  1. •fuse-ai-pilot:explore-codebase - Analyze existing component boundaries
  2. •fuse-ai-pilot:research-expert - Verify latest RSC docs via Context7/Exa
  3. •mcp__context7__query-docs - Check Next.js 16 RSC patterns

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

  • •Deciding between Server and Client Components
  • •Fetching data directly in components without API routes
  • •Implementing streaming and progressive rendering
  • •Passing data across the server/client boundary
  • •Using async components with direct database access

Why Server Components

FeatureBenefit
Zero client JSComponents never ship to the browser bundle
Direct data accessQuery databases, read files without API layer
StreamingProgressive rendering with Suspense boundaries
Automatic code splittingClient Components are lazy-loaded by default
SEO-friendlyFull HTML rendered on the server

Critical Rules

  1. •Server Components are default - No directive needed
  2. •'use client' only when needed - Hooks, events, browser APIs
  3. •Never import server-only into client - Use server-only package
  4. •Props must be serializable - No functions, classes, or Dates across boundary
  5. •Async components are server-only - Client Components cannot be async
  6. •Colocate data fetching - Fetch where the data is consumed

Best Practices

  1. •Push client boundaries down - Keep 'use client' as deep as possible
  2. •Composition pattern - Pass Server Components as children to Client
  3. •Use server-only - Prevent accidental client imports of secrets
  4. •Parallel fetching - Use Promise.all() for independent data
  5. •Cache with use cache - Cache expensive server computations
  6. •Stream with Suspense - Wrap slow components for progressive loading

Reference Guide

NeedReference
Server vs Client patternsrsc-patterns.md
Streaming and Suspensestreaming.md
Data fetching in RSCrsc-patterns.md
Loading statesstreaming.md