レンダリング
PWA Kit アーキテクチャは React のレンダリングシステムを基盤としており、ユーザーとデベロッパーの両方にとって利点となる機能が付随しています。このアーキテクチャガイドでは、PWA Kit のレンダリングシステムのこういった機能と、その仕組みについて詳しく説明します。特に、各機能を可能にするために連携して機能する、PWA Kit React SDK と Retail React App に焦点を当てます。
良い第一印象を作り出すために、ユーザーがストアフロントから最初にリクエストするページはできるだけ速く読み込める必要があります。しかし、最初のページのリクエストでは、後続のページのリクエストよりもレンダリングに時間がかかります。これは、更新が必要なものだけでなく、ページのすべてのコンポーネントをレンダリングしなければならないためです。この重要な初期ページの読み込み時に、当社ではサーバー側のレンダリングを使用して、パフォーマンス最適化のためのパワフルなツールであるキャッシングを提供します。
Managed Runtime の CDN キャッシュでは、前にレンダリングされたバージョンのページを保存して、ユーザーに即座に提供できます。すでに完了しているレンダリングよりも高速なものはありません。
キャッシングによるパフォーマンスの向上については、キャッシュヒット率の最大化のガイドを参照してください。
サーバー側のレンダリングのための主要なコードは、アプリケーションサーバーの内部で実行されます。アプリケーションサーバーは Express アプリです。受信した HTTP リクエストを処理し、レスポンスとして render という関数を呼び出します。アプリケーションサーバーは app/ssr.js で定義されます。
render 関数は PWA Kit React SDK からインポートされます。ヘルパー関数 (これも SDK から) により、Express のインスタンスを作成して、すべての GET リクエストの Express route メソッド として render 関数をこのインスタンスにアタッチできます。
最初のページが読み込まれた後は、レンダリングの処理は ハイドレーション というプロセスによってサーバー側からクライアント側に移されます。ハイドレーション中に、React アプリはユーザーのブラウザーで実行を開始します。ユーザーの入力に応答するために、イベントハンドラーが即座に処理を開始します。ページ要素は必要に応じて、またユーザーの入力による指示に従って、クライアント側でレンダリングされます。こういったユーザーによって指示された効率的なレンダリングにより、React の定評ある流動的なエクスペリエンスが可能になります。
PWA Kit アーキテクチャはバックグラウンドで機能するため、サーバー側のレンダリングからクライアント側のレンダリングへの移行をスムーズに行えます。たとえば、すべてのコンポーネントは、必要なすべての props とともに事前に読み込まれます。これには API リクエストの結果であった props も含まれます。サーバー側のレンダリング中、これらの props はハイドレーションに使用できるように、シリアル化されてページソースに埋め込まれます。
サーバー側とクライアント側の環境ではいずれも同じコードがレンダリングされるため、アイソモーフィック (isomorphic)であることが必要です。アイソモーフィック JavaScript (ユニバーサル JavaScript とも呼ばれる) とは、1 つのランタイム環境でのみ使用可能なコードコンストラクトへの直接アクセスに依存しないコードです。コンストラクトが両方の環境で使用できない場合は、条件コードを周囲に追加して、現在の環境で確実に使用できるようにします。
以下の表に、条件コードとともに使用する必要のある一般的なコンストラクトを示します。
| コンストラクト | 説明 | 可用性 |
|---|---|---|
window.location | ブラウザーからの現在の URL | クライアント側のみ |
req | Express からの HTTP リクエスト | サーバー側のみ |
res | Express からの HTTP レスポンス | サーバー側のみ |
レンダリングがクライアント側とサーバー側のどちらで行われるかを見極めるには、window オブジェクトがあるかどうかを確認します。以下の例では、この手法を使用してクライアント側のみで価格をレンダリングします。
パーソナル化されたコンテンツや頻繁に変更されるコンテンツなど、一部のコンテンツでは、最高のパフォーマンスを得るためにクライアント側で のみ レンダリングされるようにします。詳細については、キャッシュヒット率の最大化のガイドを参照してください。
PWA Kit レンダリングシステムは、各ページに相関 ID (UUID v4 形式) を提供します。相関 ID を使用して、PWA Kit からのリクエストとレスポンスを、B2C Commerce API など他のシステムのアクティビティと照合できます。
サーバー側では、Managed Runtime インフラストラクチャの API ゲートウェイで相関 ID が値 requestId に設定されます。クライアント側では、埋め込み Web Crypto API の randomUUID() メソッドを使用して、ページナビゲーションごとに UUID が生成されます。
PWA Kit アプリケーションで相関 ID を取得するには、useCorrelationId フックをインポートします。
correlation-x ヘッダーを介して、PWA Kit から B2C Commerce API に相関 ID を転送できます。レスポンスでは、転送された相関 ID が x-correlation-id ヘッダーで返され、API からの内部 ID と結合されます。
B2C Commerce API での相関 ID の使用の詳細については、B2C Commerce API についてを参照してください。
app/ssr.js 内のソースコードをレビューして、レンダリングについての理解を深めてください。ページのデフォルトのキャッシュライフタイムなど、重要なアプリケーションサーバー設定が含まれています。
PWA Kit ドキュメントを参照する際は、Retail React App のアーキテクチャガイドを必ずお読みください。