Server Components Patterns

概要

このスキルは、React Server Components におけるデータフェッチ最適化と Suspense を活用したストリーミングレンダリングのベストプラクティスを提供します。

核心哲学:

• Server-First: データはサーバーで取得し、クライアントへの転送を最小化
• Streaming: コンテンツを段階的に配信し、ユーザー体験を向上
• Cache-Aware: 適切なキャッシュ戦略で効率とフレッシュネスを両立

主要な価値:

• サーバーサイドでの効率的なデータフェッチによるパフォーマンス向上
• Suspense による知覚パフォーマンスの改善
• 適切なキャッシュ戦略によるリソース効率化

リソース構造

server-components-patterns/
├── SKILL.md                                    # 本ファイル（概要とワークフロー）
├── resources/
│   ├── data-fetching-patterns.md               # データフェッチパターン
│   ├── suspense-streaming.md                   # Suspense/Streamingガイド
│   ├── caching-strategies.md                   # キャッシュ戦略
│   └── server-actions.md                       # Server Actions
├── scripts/
│   └── analyze-data-fetching.mjs               # データフェッチ分析
└── templates/
    ├── data-fetch-template.md                  # データフェッチテンプレート
    └── server-action-template.md               # Server Actionテンプレート

コマンドリファレンス

リソース読み取り

# データフェッチパターン
cat .claude/skills/server-components-patterns/resources/data-fetching-patterns.md

# Suspense/Streamingガイド
cat .claude/skills/server-components-patterns/resources/suspense-streaming.md

# キャッシュ戦略
cat .claude/skills/server-components-patterns/resources/caching-strategies.md

# Server Actions
cat .claude/skills/server-components-patterns/resources/server-actions.md

スクリプト実行

# データフェッチ分析
node .claude/skills/server-components-patterns/scripts/analyze-data-fetching.mjs <file.tsx>

テンプレート参照

# データフェッチテンプレート
cat .claude/skills/server-components-patterns/templates/data-fetch-template.md

# Server Actionテンプレート
cat .claude/skills/server-components-patterns/templates/server-action-template.md

いつ使うか

シナリオ 1: データフェッチ実装

状況: Server Component でデータを取得する必要がある

適用条件:

• データベースまたは API からデータ取得
• 複数のデータソースを並列で取得
• キャッシュ戦略の設計が必要

期待される成果: 効率的で保守しやすいデータフェッチ実装

シナリオ 2: Suspense 設計

状況: ページの段階的レンダリングを実装したい

適用条件:

• 非同期コンポーネントが複数ある
• 重要度の異なるコンテンツがある
• ローディング UI の設計が必要

期待される成果: 最適な Suspense 境界の配置とフォールバック UI

シナリオ 3: キャッシュ最適化

状況: データの鮮度とパフォーマンスのバランスを取りたい

適用条件:

• データの更新頻度が定義されている
• キャッシュ無効化のタイミングが明確
• On-demand 再検証が必要

期待される成果: 要件に最適なキャッシュ設定

知識領域

領域 1: データフェッチパターン

基本パターン:

// Server Componentでの直接フェッチ
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId);
  return <div>{user.name}</div>;
}

並列フェッチ:

async function Dashboard() {
  // 並列実行
  const [user, posts, stats] = await Promise.all([
    getUser(),
    getPosts(),
    getStats(),
  ]);
  return <DashboardContent user={user} posts={posts} stats={stats} />;
}

詳細は: resources/data-fetching-patterns.md を参照

領域 2: Suspense/Streaming

自動 Suspense（loading.tsx）:

app/dashboard/
├── loading.tsx  → 自動的にSuspense境界を作成
└── page.tsx

手動 Suspense:

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header /> {/* 即座にレンダリング */}
      <Suspense fallback={<PostsSkeleton />}>
        <Posts /> {/* ストリーミング */}
      </Suspense>
    </>
  );
}

詳細は: resources/suspense-streaming.md を参照

領域 3: キャッシュ戦略

戦略	設定	用途
静的キャッシュ	cache: 'force-cache'	変更されないデータ
時間ベース	next: { revalidate: 3600 }	定期更新データ
動的	cache: 'no-store'	常に最新が必要
タグベース	next: { tags: ['posts'] }	選択的無効化

詳細は: resources/caching-strategies.md を参照

領域 4: Server Actions

フォーム処理:

"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.post.create({ data: { title } });
  revalidatePath("/posts");
}

楽観的更新:

"use client";
import { useOptimistic } from "react";

function PostList({ posts }) {
  const [optimisticPosts, addOptimisticPost] = useOptimistic(
    posts,
    (state, newPost) => [...state, newPost],
  );
  // ...
}

詳細は: resources/server-actions.md を参照

ワークフロー

Phase 1: データ要件分析

1. 必要なデータソースを特定
2. データの依存関係を分析
3. 更新頻度を確認

Phase 2: フェッチ戦略設計

1. 並列/逐次フェッチを決定
2. キャッシュ戦略を選択
3. エラーハンドリングを計画

Phase 3: Suspense 境界設計

1. コンテンツの優先度を分析
2. Suspense 境界を配置
3. フォールバック UI を設計

Phase 4: 実装

1. データフェッチ関数を実装
2. Server Component を実装
3. loading.tsx/Suspense を実装

Phase 5: 検証

1. パフォーマンスを測定
2. キャッシュ動作を確認
3. エラーケースをテスト

設計原則

コロケーションの原則

データフェッチはそれを使用するコンポーネントに近接して配置する。

並列化の原則

独立したデータフェッチは Promise.all で並列実行する。

段階的開示の原則

重要なコンテンツを優先し、二次的なコンテンツはストリーミングする。

フォールバック優先の原則

適切なスケルトン UI でユーザーに進行状況を伝える。

関連スキル

• .claude/skills/nextjs-app-router/SKILL.md - ルーティング構造
• .claude/skills/seo-optimization/SKILL.md - Metadata API
• .claude/skills/web-performance/SKILL.md - パフォーマンス最適化
• .claude/skills/error-handling-pages/SKILL.md - エラーハンドリング

変更履歴

バージョン	日付	変更内容
1.0.0	2025-11-25	初版リリース