SSR(「 」の略) は Server-Side Rendering 、ユーザーのブラウザーに送信する前にサーバー上で Web ページの HTML コンテンツを生成する Web 開発手法です。 これは、ブラウザが JavaScript コードをダウンロードし、ダウンロード後に Web ページを構築する「クライアントサイド レンダリング」(CSR) アプローチとは対照的です。
SSRの構造と動作原理
-
ユーザー リクエスト: ユーザーが Web サイトにアクセスすると、ブラウザはサーバーにリクエストを送信します。
-
サーバー処理: サーバーはリクエストを受信し、Web ページの HTML コンテンツを構築して処理します。 これには、データベースからのデータの取得、インターフェイス コンポーネントの作成、コンテンツの完全な HTML ドキュメントへの組み立てが含まれます。
-
完全な HTML の作成: 処理後、サーバーは必要なコンテンツ、データ、インターフェイス コンポーネントを含む完全な HTML ドキュメントを作成します。
-
ブラウザへの送信: サーバーは完全な HTML ドキュメントをユーザーのブラウザに送り返します。
-
ページのレンダリング: ブラウザは HTML ドキュメントを受信し、ユーザーに表示します。 JavaScript コードと静的リソース(CSS、画像) もブラウザーによってロードされ、実行されます。
SSRのメリット
- SEO の利点: コンテンツがサーバー上で事前にレンダリングされると、検索エンジンは Web サイトをよりよく理解し、ランク付けすることができます。
- 表示の高速化: HTML ドキュメントが事前にレンダリングされるため、ユーザーはコンテンツをより速く表示できます。
- 弱いデバイスのサポート: 事前レンダリングされたコンテンツにより、パフォーマンスが低いデバイスや接続が弱いデバイスのエクスペリエンスが向上します。
- 非 JavaScript ユーザーのサポート: SSR を使用すると、JavaScript を使用しないユーザー向けに基本バージョンを表示できます。
結論として、SSR は、ブラウザに送信する前にサーバー上で HTML コンテンツを生成することにより、Web サイトのパフォーマンスと検索性を最適化します。 これにより、ユーザー エクスペリエンスが向上し、検索エンジンのランキングが向上し、Web サイト全体のパフォーマンスが向上します。