レンダリング

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クライアント側のみ
reqExpress からの HTTP リクエストサーバー側のみ
resExpress からの HTTP レスポンスサーバー側のみ

レンダリングがクライアント側とサーバー側のどちらで行われるかを見極めるには、window オブジェクトがあるかどうかを確認します。以下の例では、この手法を使用してクライアント側のみで価格をレンダリングします。

パーソナル化されたコンテンツや頻繁に変更されるコンテンツなど、一部のコンテンツでは、最高のパフォーマンスを得るためにクライアント側で のみ レンダリングされるようにします。詳細については、キャッシュヒット率の最大化のガイドを参照してください。

app/ssr.js 内のソースコードをレビューして、レンダリングについての理解を深めてください。ページのデフォルトのキャッシュライフタイムなど、重要なアプリケーションサーバー設定が含まれています。

PWA Kit ドキュメントを参照する際は、Retail React App のアーキテクチャガイドを必ずお読みください。