mcpField
N
nextjs-rendering

nextjs-rendering

github.com/goncy開発1547 回インストール33 週間前に更新
リポジトリ

nextjs-rendering について

Next.js のレンダリング方式を選び、ストリーミング、Suspense、キャッシュコンポーネントを設定するための開発者向けガイダンスです。

主な機能

  1. 01静的・動的レンダリングの比較
  2. 02非同期 API によるモード判定の解説
  3. 03Suspense を使ったストリーミング設定
  4. 04ISR のフォールバック動作の説明
  5. 05キャッシュ領域と動的領域の併用

活用シーン

  1. 01ルートに SSG または ISR を選択
  2. 02動的ページのストリーミング計画
  3. 03ページが動的になる理由の調査
  4. 04負荷の高いページコンポーネントのキャッシュ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/goncy/skills --skill nextjs-rendering

インストール後、Claude Code で/nextjs-renderingを入力して読み込まれたか確認します。

詳細

Next.js のレンダリング

Next.js のレンダリングモード、ストリーミング動作、静的ページ生成と動的ページ生成についての専門的なガイダンスです。

静的レンダリングと動的レンダリング

Next.js には、基本となるレンダリング方式が 2 つあります。静的レンダリングと動的レンダリングです。

静的レンダリング：

  • ページはビルド時に構築され、CDN にアップロードされます
  • リクエスト時にコンピューティング処理は行われません
  • アセットは世界中のエッジロケーションに複製されます
  • 応答時間が短くなります（コンピューティング処理がなく、ユーザーの近くにキャッシュされます）
  • オリジンのリージョンが停止しても利用できます

動的レンダリング：

  • ページは設定されたリージョンでオンデマンドに実行されます
  • リクエスト時にコンピューティング処理が発生します
  • リージョンが利用できなくなると停止します
  • コンテンツをビルド時に確定できない場合に必要です

SSG（静的サイト生成）と ISR（インクリメンタル静的再生成）は、内部的には同じ仕組みです。異なるのは、すべてのパスを事前に生成するか、オンデマンドで段階的に生成するかだけです。

レンダリングモードの判定：非同期の動的 API

Next.js は、非同期の動的 APIを使用して、ページが静的か動的かを判定します。フレームワークは事前レンダリングを実行し、同期的に解決されるものと非同期に解決されるものを検出します。

マイクロタスクテスト：

  1. Next.js は最初に「ウォームアップレンダリング」を実行し、キャッシュ済みのインスタンスを探してキャッシュを埋めます
  2. 2 回目のレンダリングは 1 ティックだけ実行された後、中断されます
  3. そのマイクロタスク内に解決されるものは「即時」と見なされ、静的にできます
  4. 1 ティック以内に解決できないものは動的として扱われます

params の特別なケース： params を使用するルートは静的にできます。generateStaticParams では、項目ごとに各ルートが 1 回呼び出されるためです。パラメーターはビルド時にわかっているので、即座に解決されます。

// Static: params from generateStaticParams resolve instantly
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }];
}

export default async function Page({ params }: { params: { id: string } }) {
  // params.id is instant - this page can be static
}

ストリーミングと Suspense 境界

ストリーミングが有効になるのは、動的レンダリングの場合のみです。 静的コンテンツではコンピューティング処理が発生しないため、ストリーミングされません。完全な HTML が CDN から配信されます。

ドキュメントレベルの Suspense 要件： ローディングスケルトンを使ったストリーミングを有効にするには、HTML ドキュメントを空の Suspense 境界で囲みます。境界の外側にドキュメントのラッパーがないと、ストリーミングするものがありません。内部のコンテンツの読み込み中に送信するための外側のシェルが、フレームワークには必要です。

// Enable streaming with document shell
<Suspense fallback={null}>
  <html>
    <body>
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>
    </body>
  </html>
</Suspense>

ISR と Suspense フォールバック： ISR パスの生成時には、Suspense 境界のフォールバックは表示されません。ISR の生成はビルド時または初回リクエスト時に行われる（静的生成される）ため、ストリーミングは発生せず、完全なページが生成されてから配信されます。

キャッシュコンポーネント（use cache）

キャッシュコンポーネントを使用すると、同じページ内で静的レンダリングと動的レンダリングを組み合わせられますが、ページ自体には引き続きレンダリングモードがあります。

ページコンポーネントへの use cache の適用： ページまたはページのメインコンポーネントに use cache を追加すると、次のような静的出力が生成されます。

  • キャッシュされます（静的）
  • ストリーミングされません
  • 「ホール」（Suspense 境界）は含まれません

動的ページ内のキャッシュコンポーネント： 個々のコンポーネントに use cache を設定しても、ページ全体は静的または動的のどちらかです。キャッシュコンポーネントを使うと、動的ページ内の静的なキャッシュ済みセクションや、静的ページ内の動的なセクションを、きめ細かく制御できます。

// Page-level cache: produces static output
'use cache';
export default async function Page() {
  // Entire page is static, no streaming
}

// Component-level cache: can mix static/dynamic
export default async function Page() {
  return (
    <>
      <StaticCachedSection />  {/* has 'use cache' */}
      <DynamicSection />        {/* no cache directive */}
    </>
  );
}

レンダリングのワークフロー

Next.js のレンダリングを扱う際は、次の手順に従います。

  1. ページを静的にできるか（すべてのデータをビルド時に利用できるか）判断します
  2. 静的にできる場合は、完全な SSG（すべてのパス）と ISR（段階的）のどちらにするか決めます
  3. 動的レンダリングが必要な場合は、ストリーミング用の Suspense 境界を計画します
  4. スケルトンを使ったストリーミングを行う場合は、ドキュメントレベルの Suspense ラッパーを追加します
  5. use cache をきめ細かく使い、動的ページ内の高コストなコンポーネントをキャッシュします
  6. ストリーミングは動的レンダリングでのみ機能し、静的レンダリングや ISR では機能しないことを覚えておいてください

コメント

Markdown 対応