Dynamic Rendering
ダイナミックレンダリングとは、検索ボットにはサーバーで事前レンダリングされた静的HTML版のページを提供し、通常のユーザーには元のJavaScript駆動版を表示する手法です。かつてはJavaScriptコンテンツのインデックス登録における回避策として使用されていましたが、現在ではGoogleから長期的な解決策としては推奨されていません。
動的レンダリングは、リクエスト元クライアントの User-Agent を判定し、検索ボットには事前レンダリングされた静的 HTML ページを返し、ユーザーには通常の JavaScript 版を提供します。
これは、JavaScript で生成されたコンテンツがクローラーによって十分にインデックスされないことが多かった時代の回避策として登場しました。
Google は現在、これを明確に「回避策であり、長期的な解決策ではない」と位置づけており、代わりにサーバーサイドレンダリング(SSR)、静的レンダリング、またはハイドレーションを推奨しています。
ボットとユーザーに異なるコンテンツを返すため、運用上の複雑さやリソースのオーバーヘッドが大きく、すべての人に同一のコンテンツを提供するという原則と衝突する場合があります。
これはサーバーサイドレンダリングとは異なります。SSR はすべての訪問者に同じサーバー側レンダリング済みの出力を返しますが、動的レンダリングはボットとユーザーを分け、それぞれに異なるレスポンスを送ります。
概要
動的レンダリングは、同じ URL に対して、誰がリクエストしているかに応じて 2 つの異なるレスポンスを返す手法です。検索エンジンクローラーにはサーバー上で事前レンダリングされた静的 HTML を返し、実際のユーザーにはブラウザ内で JavaScript が実行される元のバージョンを返します。
この手法は、シングルページアプリケーション(SPA)など、コンテンツの多くがクライアント側 JavaScript で生成されるサイトで一般的だった問題への回避策として生まれました。その JavaScript を完全に処理できないクローラーは、本文コンテンツが空、または不完全な状態のままページをインデックスしてしまうことがありました。
仕組み
Google の公式ドキュメントによると、動的レンダリングは次の流れで動作します。
User-Agent の検出: Web サーバーは、受信した各リクエストの User-Agent を調べ、それが検索ボットか通常のユーザーかを判断します。
リクエストのルーティング: JavaScript を処理できないクローラー、または特定の機能を必要とするクローラーからのリクエストはレンダリングサーバーに送られ、それ以外のユーザーや対応可能なクローラーには通常どおり提供されます。
静的 HTML レスポンス: レンダリングサーバーは動的コンテンツを静的 HTML に変換してクローラーに返し、ユーザーには JavaScript が実行される元のページを引き続き提供します。
Google の現在の見解
Google はもはや動的レンダリングを推奨していません。公式ドキュメントのタイトル自体が「Dynamic Rendering as a workaround」に変更されており、冒頭の警告では「dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines.」と記されています。
Google は 3 つの代替案を提示しています。
サーバーサイドレンダリング(SSR): ページはサーバー上でレンダリングされ、その後ボットとユーザーの両方に同一の内容として提供されます。
静的レンダリング: ページはビルド時にプリレンダリングされ、静的ファイルとして配信されます。
Hydration: 初期HTMLが先に送信され、その後JavaScriptがインタラクティブ機能を重ねます。
動的レンダリングが推奨されない理由は、ボットとユーザーに異なるコンテンツを配信することが、本質的に運用の複雑さと別個のレンダリングサーバーにかかるリソース負担を増やし、さらに両者のレスポンスが乖離するリスクを伴うためです。Googleは、すべての訪問者に一貫したコンテンツを提供する最新のレンダリング手法を優先するよう推奨しています。
以下との区別Server-Side Rendering
動的レンダリングはサーバーサイドレンダリングと混同されやすいですが、両者は本質的に異なります。サーバーサイドレンダリングはボットとユーザーを区別せず、同じサーバー生成の出力をすべての人に配信します。これに対して動的レンダリングは、User-Agentを使ってリクエスターを分岐し、ボットには静的HTMLを、ユーザーにはJavaScript版を返します。したがって、動的レンダリングはSSRの下位分類ではなく、分岐ロジックに基づく別の回避策です。