Reactストリーミング：最適化されたユーザーエクスペリエンスのためのプログレッシブサーバーサイドレンダリング

Web開発の世界では、高速で応答性の高いユーザーエクスペリエンスを提供することが最も重要です。ユーザーは、Webサイトが迅速にロードされ、遅延なくインタラクティブであることを期待しています。ユーザーインターフェース構築のための人気のJavaScriptライブラリであるReactは、この課題に対処するためにストリーミングサーバーサイドレンダリング（SSR）と呼ばれる強力なテクニックを提供します。この記事では、ReactストリーミングSSRの概念を掘り下げ、その利点、実装、およびWebサイトのパフォーマンスとユーザーエクスペリエンスへの影響を探ります。

サーバーサイドレンダリング（SSR）とは何ですか？

従来のクライアントサイドレンダリング（CSR）では、ブラウザはHTML、JavaScript、CSSファイルをダウンロードし、その後クライアントサイドでコンテンツをレンダリングします。これは柔軟ですが、ユーザーがすべてのリソースのダウンロードとJavaScriptの実行を待ってからコンテンツが表示されるため、初期レンダリングが遅れる可能性があります。一方、SSRはサーバーでReactコンポーネントをレンダリングし、完全にレンダリングされたHTMLをクライアントに送信します。これにより、ブラウザはすぐに表示できる完全に形成されたHTMLを受け取るため、初期ロード時間が短縮されます。

従来のSSRの制限

従来のSSRはCSRよりも大幅に改善されていますが、それ自体にも制限があります。従来のSSRでは、クライアントにHTMLが送信される前に、アプリケーション全体をサーバーでレンダリングする必要があります。これは、複数のコンポーネントとデータ依存関係を持つ複雑なアプリケーションでは、特にボトルネックとなる可能性があります。First Byteまでの時間（TTFB）が高くなり、ユーザーが遅く感じることがあります。

ReactストリーミングSSR：プログレッシブアプローチ

ReactストリーミングSSRは、プログレッシブアプローチを採用することで、従来のSSRの制限を克服します。アプリケーション全体がサーバーでレンダリングされるのを待つのではなく、ストリーミングSSRはレンダリングプロセスをより小さなチャンクに分割し、それらのチャンクが利用可能になるとクライアントにストリーミングします。これにより、ブラウザははるかに早くコンテンツの表示を開始でき、知覚されるパフォーマンスが向上し、TTFBが削減されます。これは、食事全体を一度に準備するのを待つのではなく、前菜、メインコース、デザートの順に食事を提供するレストランのようなものです。

ReactストリーミングSSRの利点

ReactストリーミングSSRは、Webサイトのパフォーマンスとユーザーエクスペリエンスに多くの利点をもたらします。

• 高速な初期ロード時間：HTMLチャンクをクライアントにストリーミングすることで、ブラウザははるかに早くコンテンツの表示を開始でき、知覚されるロード時間が短縮され、ユーザーエンゲージメントが向上します。
• First Byteまでの時間（TTFB）の改善：ストリーミングSSRは、アプリケーション全体がレンダリングされるのを待つのではなく、準備ができ次第最初のHTMLチャンクを送信することで、TTFBを削減します。
• 強化されたユーザーエクスペリエンス：初期ロード時間が速いほど、ユーザーはコンテンツが表示されるのを待つ必要がないため、ユーザーエクスペリエンスが向上します。
• より良いSEO：HTMLがサーバーで利用可能になるため、検索エンジンはコンテンツをより効果的にクロールおよびインデックスできます。
• プログレッシブハイドレーション：ストリーミングSSRは、プログレッシブハイドレーションを可能にし、クライアントサイドのReactコードがHTMLチャンクがストリーミングされるにつれてイベントリスナーを段階的にアタッチし、アプリケーションをインタラクティブにします。
• リソース利用率の向上：レンダリングプロセスをより小さなチャンクに分割することで、ストリーミングSSRはサーバーのリソース利用率を向上させることができます。

ReactストリーミングSSRの仕組み

ReactストリーミングSSRは、ReactDOMServer.renderToPipeableStream()APIを利用してHTMLチャンクをクライアントにストリーミングします。このAPIは、サーバーのレスポンスオブジェクトにパイプできる読み取り可能なストリームを返します。仕組みの簡単な例を次に示します。

1. サーバーはページの要求を受け取ります。
2. サーバーはReactDOMServer.renderToPipeableStream()を呼び出して、Reactアプリケーションをストリームにレンダリングします。
3. Reactコンポーネントがレンダリングされるにつれて、ストリームはHTMLチャンクを発行し始めます。
4. サーバーはストリームをレスポンスオブジェクトにパイプし、HTMLチャンクをクライアントに送信します。
5. ブラウザはHTMLチャンクを受け取り、それらをプログレッシブに表示し始めます。
6. すべてのHTMLチャンクが受信されると、ブラウザはReactアプリケーションをハイドレートし、インタラクティブにします。

ReactストリーミングSSRの実装

ReactストリーミングSSRを実装するには、Node.jsサーバーとReactアプリケーションが必要です。手順のガイドを次に示します。

1. Node.jsサーバーの設定：ExpressやKoaなどのフレームワークを使用してNode.jsサーバーを作成します。
2. ReactとReactDOMServerのインストール：reactおよびreact-domパッケージをインストールします。
3. Reactアプリケーションの作成：サーバーでレンダリングしたいコンポーネントでReactアプリケーションを作成します。
4. ReactDOMServer.renderToPipeableStream()の使用：サーバーコードで、ReactDOMServer.renderToPipeableStream()APIを使用して、Reactアプリケーションをストリームにレンダリングします。
5. ストリームをレスポンスオブジェクトにパイプ：サーバーのレスポンスオブジェクトにストリームをパイプして、HTMLチャンクをクライアントに送信します。
6. エラーの処理：レンダリングプロセス中に発生する可能性のあるエラーをキャッチするために、エラー処理を実装します。
7. ハイドレーション用のスクリプトタグの追加：クライアントサイドでReactアプリケーションをハイドレートするために、HTMLにスクリプトタグを含めます。

コードスニペット例（サーバーサイド）：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

コードスニペット例（クライアントサイド - `client.js`）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Reactアプリコンポーネント例（App.js）：

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>