サーバー側レンダリング

サーバーサイドレンダリングとは、JavaScriptがデータを挿入する最小限のドキュメントを送信するのではなく、サーバーがページの完全なマークアップを生成してブラウザに送信する手法です。ブラウザは、データバンドルのダウンロード、解析、実行、取得を待つことなく、レスポンスが到着するとすぐに意味のあるコンテンツを表示できます。

これは、純粋なクライアントサイドレンダリングの、具体的かつ十分に立証された弱点に対処するものです。特にJavaScriptの実行にコストがかかる低速なデバイスや接続環境では、コンテンツの表示が大幅に速くなります。検索エンジンやその他の自動化されたユーザーは、遅延したり不完全なレンダリング段階に依存することなく、コンテンツを直接受信します。ソーシャルシェアのプレビューは、特別な処理なしで機能します。また、JavaScriptの読み込みや実行に失敗した場合でも、ユーザーエクスペリエンスの低下がよりスムーズに行われます。これは、多くのチームが想定しているよりも頻繁に発生します。

水分補給はそれに伴うコストであり、しばしば過小評価されがちです。サーバー側でレンダリングされたマークアップが表示された後、クライアント側のフレームワークはイベントハンドラをアタッチし、ページをインタラクティブにするために内部状態を再構築する必要があります。この間、ページは準備完了のように見えますが、実際には応答しないため、訪問者が何かをクリックしても何も起こらないという特有の不具合が発生します。大きなページや処理速度の遅いデバイスでは、この処理時間が長くなることがあります。

そのコストを削減するために、いくつかの手法が登場しました。部分的かつ選択的なハイドレーションでは、ページ全体ではなく、インタラクティブな部分のみをインタラクティブにします。ストリーミングでは、マークアップを段階的に送信することで、ページ全体が生成される前にコンテンツが表示されます。アイランドアーキテクチャでは、インタラクティブなコンポーネントを、静的なマークアップ内の独立したユニットとして扱います。これらの手法はいずれも、最初のレンダリング後に必要となるクライアント側の作業量を削減します。

静的サイト生成は、リクエストごとに変更されないコンテンツの場合、まず検討すべき選択肢です。ページはビルド時にレンダリングされ、ファイルとして配信されるため、リクエストごとのレンダリングよりも高速で、配信コストも低く、耐障害性が高く、エッジでのキャッシュも容易です。コンテンツが変更されるものの、訪問者ごとに変更されない場合は、増分再生成戦略によって影響を受けるページがスケジュールに基づいて、またはオンデマンドで再構築されるため、完全な再構築を行うことなく、ほとんどのメリットを享受できます。

運用上の影響は静的ホスティングとは異なり、計画が必要となる点がいくつかあります。リクエストごとにレンダリングを行うと、トラフィックに比例してサーバーリソースが消費されるため、静的ファイルにはないスケーリングの検討とコストが発生します。キャッシュが重要になり、パーソナライズされたコンテンツを含むページをキャッシュするには、ユーザーごとに変化する部分と変化しない部分を慎重に分離する必要があります。サーバーエラーは、データの読み込みだけでなく、ページのレンダリングにも影響を及ぼします。

データ取得戦略は、実際のメリットを大きく左右します。サーバー側でのレンダリングは、ページに必要なデータがすぐに利用できる場合にのみ有効です。複数の低速な内部サービスを待つサーバーレンダリングは、シェルを即座に表示するクライアントレンダリングよりも、最初のバイトを取得するまでの時間が長くなる可能性があります。依存関係の処理が遅い場合は、準備が整った部分をストリーミング配信し、残りの部分を処理することで、メリットを維持できます。

決定は、フレームワークの流行ではなく、コンテンツとターゲットユーザーに基づいて行うべきです。検索上位表示が必須で、接続環境が悪い場合でも高速に読み込まれる必要があるコンテンツ量の多いページは、大きな恩恵を受けます。一方、認証が必要なインタラクティブ性の高いアプリケーションでは、検索での視認性は重要ではなく、ユーザーは既にアプリケーションを起動しているため、恩恵ははるかに少なく、複雑さを正当化できない場合があります。多くの製品は、セクションごとに異なるアプローチを賢明に採用しています。

この選択はインフラストラクチャ、配信、検索パフォーマンスに同時に影響するため、フロントエンドの好みというよりはアーキテクチャ上の決定です。実際には、以下の基準で評価されます。 Webパフォーマンス 測定された現場データに対して実施され、 製品開発、検索の影響は以下のように評価されます。 マーケティングサービスなぜなら、インデックス作成の動作は、変更を正当化する最も強力な根拠となることが多いからである。