ダイナミックレンダリング

ダイナミックレンダリングは、訪問者が人間のユーザーか自動化されたクローラーかに応じて、異なるバージョンのウェブページを提供する現代的なウェブアーキテクチャのテクニックです。

定義

ダイナミックレンダリングは、ページをリクエストするクライアントの種類を検出し、そのクライアントに最適化されたバージョンを提供するウェブ配信方法です。通常、人間の訪問者はJavaScriptフレームワークで構築された通常のクライアントサイドレンダリング（CSR）バージョンを受け取り、検索エンジンのボットや自動化されたクローラーは事前にレンダリングされたHTMLバージョンが提供されます。このアプローチにより、クローラーが複雑なJavaScriptを実行することなく完全にレンダリングされたコンテンツにアクセスできるようになり、インデックス付けとクロール効率が向上します。これは、ヘッドレスブラウザやプリレンダリングサービスを使用して、必要に応じて静的HTMLスナップショットを生成することで実装されることが一般的です。JavaScriptに依存したサイトにおいて、伝統的なサーバーサイドレンダリングを実装するのが難しい場合に、ダイナミックレンダリングは一般的なワークアラウンドとして使用されます。

メリット

• 検索エンジンのクロール性を向上させ、JavaScriptに依存したサイトのSEOを改善します。
• React、Vue、Angularなどの現代的なSPAフレームワークがユーザーにとってインタラクティブでありながらインデックス可能であることを可能にします。
• ウェブサイトのアーキテクチャを完全に再構築することなく実装できます。
• クローラーがページのコンテンツにアクセスする前に複雑なJavaScriptを実行する必要を減らします。
• ボットや自動システムに構造化データやメタデータを公開するのに役立ちます。

デメリット

• ユーザーとボットのための別々のレンダリングワークフローを維持する必要があります。
• インフラの複雑さとサーバーのリソース使用量が増加します。
• 不適切な実装により、ボットとユーザーのコンテンツ間に不一致が生じる可能性があります。
• 長期的なアーキテクチャの解決策ではなく、一時的な対処法と見なされます。
• 間違ったページのバージョンを提供しないようにするため、信頼性の高いボット検出が必要です。

使用ケース

• JavaScriptフレームワークで構築されたシングルページアプリケーション（SPA）のSEO可視性を向上させる。
• クライアントサイドスクリプトによって動的に生成されたコンテンツを検索エンジンボットがインデックス可能にする。
• JavaScriptを大量に実行することができないウェブスクリーピングシステムや自動化されたクローラーをサポートする。
• ソーシャルメディアのプレビュー用ボットやリンク展開サービスに事前にレンダリングされたHTMLスナップショットを提供する。
• 既存のウェブプラットフォームがサーバーサイドまたはハイブリッドレンダリングアーキテクチャへ移行するのを支援する。