0Pricing
React Academy · レッスン

選択的HydrationとHTMLストリーミング

Suspense boundariesでHTML chunksをstreamingし、インタラクティブなislandsを優先的にhydrateします。

「選択的HydrationとHTMLストリーミング」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ページ全体のハイドレーションの問題

従来のSSRでは、ページ全体を一度にハイドレーションします。地図やグラフなど、ページの一部で大量のJavaScriptを使うと、単純な操作ボタンを含め、ページの他の部分のハイドレーションまでブロックされます。

renderToPipeableStreamによるHTMLのストリーミング

React 18のストリーミングAPIは、HTMLをチャンク単位で送信します。ページのシェルはすぐに届き、Suspense境界はコンテンツの準備ができると埋められます。これにより、すべてのデータが揃う前にユーザーへUIを表示できます。

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/bundle.js'],
  onShellReady() {
    res.setHeader('content-type', 'text/html');
    pipe(res);
  },
  onError(error) {
    console.error(error);
  },
});

ストリーミングの実際の動作

Reactは、サスペンドしないコンポーネントをすぐにレンダリングします（シェル）。Suspense境界のデータが解決すると、Reactはその部分を埋めるHTMLチャンクと、ブラウザーに挿入場所を指示するscriptタグを送信します。

選択的ハイドレーション

ストリーミングを使うと、React 18はコンポーネントを個別にハイドレーションできます。まだハイドレーションされていない要素をユーザーがクリックした場合、Reactはそのコンポーネントのハイドレーションを優先し、その後で残りの処理を続けます。

Suspense境界をストリーミング単位として扱う

各<Suspense>境界は、1つのストリーミング単位です。フォールバックはすぐに送信され、実際のコンテンツは後からストリーミングされます。適切な粒度でストリーミングできるように、Suspense境界を入れ子にしてください。

function App() {
  return (
    <Layout>
      {/* Streams first — no data needed */}
      <Header />
      <Suspense fallback={<ArticleSkeleton />}>
        {/* Streams when article data resolves */}
        <Article />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        {/* Streams independently from Article */}
        <Comments />
      </Suspense>
    </Layout>
  );
}

loading.tsxを使ったNext.jsのストリーミング

Next.jsのApp Routerでは、loading.tsxがSuspenseのフォールバックになります。ページのシェル（レイアウト）が先にストリーミングされ、async関数が解決するとページのコンテンツがストリーミングされます。

// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
  return <ArticleSkeleton />;
}

// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
  const posts = await fetchPosts(); // data fetch happens server-side
  return <PostList posts={posts} />;
}

Suspense内のClient Components

Server Componentsは、データのストリーミングにSuspenseを使用します。Client Componentsは、遅延ロードにSuspenseを使用します。どちらも選択的ハイドレーションの恩恵を受けられます。

// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

優先度ベースのハイドレーション

ユーザーがまだハイドレーションされていないコンポーネントを操作した場合（クリックなど）、React 18はページの他の部分のハイドレーションを完了する前に、そのコンポーネントを同期的にハイドレーションします。

onShellReadyとonAllReadyの違い

onShellReadyは、シェル（サスペンドしていない部分）のストリーミング準備が整ったときに発火します。onAllReadyは、すべてのレンダリングが完了したときに発火します。静的生成や、完全なHTMLを一度に送信する必要がある場合に便利です。

// For streaming (progressive rendering):
onShellReady() { pipe(res); }

// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }

AbortController

遅いレンダリング（タイムアウト超過など）でSSRをキャンセルするには、AbortControllerのシグナルを渡します。

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

const { pipe } = renderToPipeableStream(<App />, {
  signal: controller.signal,
  onShellReady() { pipe(res); },
});

clearTimeout(timeoutId);

ストリーミングの効果を測定する

ストリーミングを有効にする前後で、LighthouseまたはWebPageTestを使ってTime To First Byte（TTFB）とLargest Contentful Paint（LCP）を測定し、改善効果を数値化してください。

確認問題

まだハイドレーションされていない要素をユーザーがクリックしたとき、React 18の選択的ハイドレーションでは何が起こりますか？

まとめ

ストリーミングSSRでは、renderToPipeableStreamとSuspense境界を使ってHTMLを段階的に送信します。各Suspense境界は独立してストリーミングされます。選択的ハイドレーションは、ユーザーが操作した要素を優先します。Next.jsでは、loading.tsxがページレベルのストリーミングにおける自動のSuspenseフォールバックになります。

よくある質問

「選択的HydrationとHTMLストリーミング」レッスンは無料ですか？

はい。「選択的HydrationとHTMLストリーミング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「選択的HydrationとHTMLストリーミング」で何を学びますか？

Suspense boundariesでHTML chunksをstreamingし、インタラクティブなislandsを優先的にhydrateします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「選択的HydrationとHTMLストリーミング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React SSRの内部動作
  2. Hydrationエラー：原因と修正
  3. 選択的HydrationとHTMLストリーミング
  4. Islands Architectureパターン
← React Academyに戻る