react-server-components-framework

React Server Components フレームワーク

概要

React Server Components（RSC）では、サーバー優先のレンダリングとクライアント側のインタラクティブ性を実現できます。このスキルでは、Next.js 16.2 LTS の App Router パターン、Server Components、Server Actions、ストリーミングについて説明します。

Next.js 16.2.6 / React 19.2.6（セキュリティリリース、2026年5月） — Turbopack がデフォルトのバンドラーです（--turbo フラグは不要です）。Server Fast Refresh はデフォルトで有効になっており、新しい cacheComponents 設定フラグが従来の experimental_ppr エスケープハッチに代わります。AI エージェントによる Next.js のデバッグには、Next DevTools MCP が用意されています。.mcp.json に npx -y next-devtools-mcp@latest を設定すると（開発サーバーの /_next/mcp エンドポイント経由で接続します）、セッション中にレンダーツリーとキャッシュ境界を調べられます。

このスキルを使用する場面：

• App Router を使って Next.js 16 以降のアプリケーションを構築する
• コンポーネントの境界（Server Components と Client Components）を設計する
• キャッシュと再検証を使ったデータ取得を実装する
• Server Actions でミューテーションを作成する
• ストリーミングと Suspense でパフォーマンスを最適化する

---

クイックリファレンス

Server Components と Client Components

機能	Server Component	Client Component
ディレクティブ	なし（デフォルト）	'use client'
Async/await	はい	いいえ
フック	いいえ	はい
ブラウザー API	いいえ	はい
データベースアクセス	はい	いいえ
クライアント JS バンドル	なし	クライアントに送信される

重要なルール：Server Components は Client Components をレンダリングできますが、Client Components から Server Components を直接インポートすることはできません（代わりに children プロパティを使用してください）。

データ取得のクイックリファレンス

Next.js 16 の Cache Components（推奨）：

import { cacheLife, cacheTag } from 'next/cache'

// Default — shared across all users (public CDN-cached)
async function CachedProducts() {
  'use cache'
  cacheLife('hours')
  cacheTag('products')
  return await db.product.findMany()
}

// Remote variant (16.2+) — always served from the edge/CDN, never rendered
// inline on the origin. Best for static product listings, marketing content.
async function MarketingHero() {
  'use cache: remote'
  cacheLife('days')
  return <Hero />
}

// Private variant (16.2+) — cached per-user session. Never shared across
// users. Use for personalized dashboards with expensive computation.
async function UserDashboard({ userId }: { userId: string }) {
  'use cache: private'
  cacheLife('minutes')
  cacheTag(`user:${userId}`)
  return await loadDashboard(userId)
}

// Invalidate cache — v16 requires a cacheLife profile as the 2nd arg
import { revalidateTag } from 'next/cache'
revalidateTag('products', 'max') // or updateTag('products') for read-your-writes

next.config.ts で有効にします：

import type { NextConfig } from 'next'
const config: NextConfig = {
  cacheComponents: true,  // 16.2+ — replaces experimental_ppr flag
}
export default config

従来の Fetch オプション（Next.js 15）：

// Static (cached indefinitely)
await fetch(url, { cache: 'force-cache' })

// Revalidate every 60 seconds
await fetch(url, { next: { revalidate: 60 } })

// Always fresh
await fetch(url, { cache: 'no-store' })

// Tag-based revalidation
await fetch(url, { next: { tags: ['posts'] } })

Server Actions のクイックリファレンス

'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const post = await db.post.create({ data: { title } })
  revalidatePath('/posts')
  redirect("/posts/" + post.id)
}

非同期 Params/SearchParams（Next.js 16）

ルートパラメーターと検索パラメーターは、await が必要な Promise になりました：

// app/posts/[slug]/page.tsx
export default async function PostPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ page?: string }>
}) {
  const { slug } = await params
  const { page } = await searchParams
  return <Post slug={slug} page={page} />
}

注： layout.tsx、generateMetadata()、ルートハンドラーにも適用されます。移行ガイド全文：ファーストパーティの next-upgrade / vercel:next-upgrade スキル。現場の注意点：Read("references/ork-delta.md")。

開発サーバー（Next.js 16.2 LTS）

• Turbopack がデフォルト — next dev と next build は、フラグなしで Turbopack を実行します。--webpack を渡すのは、必要な場合（レガシープラグイン）のみです。
• Server Fast Refresh — 保存時に Server Components がホットリロードされ、クライアントの状態は保持されます。追加の設定は不要です。16.2 ではデフォルトで有効です。
• Next DevTools MCP — .mcp.json に npx -y next-devtools-mcp@latest を登録すると、/_next/mcp エンドポイント経由で実行中の開発サーバーに接続し、RSC ペイロードとキャッシュ境界を MCP クライアントに公開します。スクリーンショットを撮らずにセッション中のレンダーツリーを調べる必要がある AI エージェント向けに設計されています（next-browser バイナリはありません）。

---

リファレンス

Read("references/<file>") で必要に応じて読み込みます：

ファイル	内容
ork-delta.md	プロジェクト内のルールと注意点：PR #2143 による架空 API の修正、React 19 のプロジェクト内規約（2026-07-31 の要約）
tanstack-router-patterns.md	Next.js を使わない React 19 の機能、ルートベースのデータ取得、クライアントレンダリングアプリのパターン
capability-details.md	12 種類すべての RSC 機能に関するキーワードと問題マッピングのメタデータ

---

上流のカバレッジ（再記載しないでください）

以下のトピックに関するベンダーのチュートリアルは、ファーストパーティのスキルとドキュメントにあります。このスキルでは、最低限必要な知識、実体験で得た知見、プロジェクト固有の判断のみを扱います（references/ork-delta.md）。

トピック	ファーストパーティの情報源
Server Components の基礎（非同期コンポーネント、データ取得、ルートセグメント設定、generateStaticParams、エラー処理）	next-best-practices / vercel:nextjs スキル、nextjs.org/docs
Client Components、'use client'、ハイドレーション、クライアントのみのレンダリング	next-best-practices / vercel:nextjs スキル
サーバー／クライアント境界と構成パターン、シリアライズ可能な props	next-best-practices / vercel:nextjs スキル、vercel-composition-patterns
データ取得とキャッシュ（fetch のキャッシュオプション、revalidate、タグ）	next-best-practices / vercel:nextjs スキル
ストリーミング SSR、Suspense 境界、loading.tsx、スケルトン状態	vercel:nextjs スキル（ストリーミング）
Server Actions、プログレッシブエンハンスメント、useActionState フォーム、Zod による検証	vercel:nextjs スキル（Server Actions）
高度なルーティング（並列、インターセプト、ルートグループ、動的およびキャッチオール）	vercel:nextjs スキル（ルーティング）
Pages Router から App Router への移行	next-upgrade / vercel:next-upgrade スキル
Next.js 16 へのアップグレード、破壊的変更、codemods	next-upgrade / vercel:next-upgrade スキル
Cache Components：use cache、cacheLife、cacheTag、updateTag、PPR	next-cache-components / vercel:next-cache-components スキル
React 19 のコア API（useActionState、useFormStatus、useOptimistic、use()、prop としての ref）	context7: /vercel/next.js + react.dev（query-docs）
RSC の実装とデプロイのチェックリスト	next-best-practices スキル

---

ベストプラクティスの概要

コンポーネント境界

• Client Components はコンポーネントツリーの末端（葉）に配置します
• デフォルトでは Server Components を使用します
• インタラクティブな部分だけを最小限に切り出して Client Components にします
• Server Components は children として Client Components に渡します

データ取得

• 使用箇所の近くにある Server Components でデータを取得します
• 独立したデータには並列取得（Promise.all）を使用します
• 適切なキャッシュおよび再検証オプションを設定します
• 静的ルートには generateStaticParams を使用します

パフォーマンス

• ストリーミングには Suspense 境界を使用します
• 即時のローディング状態を実現するには loading.tsx を実装します
• 静的／動的の混在には PPR を有効にします
• レンダリングモードを制御するにはルートセグメント設定を使用します

---

テンプレート

• scripts/server-component-template.tsx - データ取得を行う基本的な非同期 Server Component
• scripts/client-component-template.tsx - フックを使用するインタラクティブな Client Component
• scripts/server-action-template.ts - 検証と再検証を行う Server Action
• scripts/create-server-component.md - コマンド形式のスキャフォールド。tests/skills/scripts/ でテストされるスクリプト呼び出しの契約として維持されています

---

トラブルシューティング

エラー	対処方法
"You're importing a component that needs useState"	'use client' ディレクティブを追加します
"async/await is not valid in non-async Server Components"	関数宣言に async を追加します
"Cannot use Server Component inside Client Component"	Server Component を children prop として渡します
"Hydration mismatch"	Date.now()、Math.random()、ブラウザー API には 'use client' を使用します
"params is not defined" or params returning Promise	params の前に await を追加します（Next.js 16 の破壊的変更）
"experimental_ppr is not a valid export"	代わりに "use cache" ディレクティブを使った Cache Components を使用します
"cookies/headers is not a function"	cookies() または headers() の前に await を追加します（Next.js 16）

---

リソース

• Next.js 16 ドキュメント
• React 19.2 ブログ記事
• React Server Components RFC
• App Router 移行ガイド

---

関連スキル

React Server Components を習得した後は、以下を学びます。

1. ストリーミング API パターン - リアルタイムデータのパターン
2. 型安全性とバリデーション - tRPC の統合
3. エッジコンピューティングのパターン - グローバルなデプロイ
4. パフォーマンス最適化 - Core Web Vitals

---

機能の詳細

各 RSC 機能（react-19-patterns、use-hook-suspense、optimistic-updates-async、rsc-patterns、server-actions、data-fetching、streaming-ssr、caching、cache-components、tanstack-router-patterns、async-params、nextjs-16-upgrade）のキーワードと問題マッピングに関するメタデータです。

機能の詳細をすべて読み込むには、Read("references/capability-details.md") を実行します。