SSR（サーバーサイドレンダリング）とは、サーバー側でWebページをレンダリング（生成）してから、HTMLとしてクライアント（ブラウザ）に送信する技術です。これに対して、クライアントサイドレンダリング（CSR）は、クライアント側でJavaScriptが実行されてからページを描画します。
SSRの仕組み
SSRの仕組みとしては以下です。
- リクエスト: ユーザーがWebサイトにアクセスすると、そのリクエストがサーバーに送られます。
- サーバー側でレンダリング: サーバーがそのページのHTMLを生成し、動的なコンテンツをサーバー側で処理します。
- HTMLを送信: 完全なHTMLとして生成されたページがブラウザに送信されます。
- ブラウザに表示: ブラウザはそのHTMLを受け取り、すぐにページを表示します。JavaScriptは後で必要に応じて実行され、追加の機能やインタラクションを提供します。
SSRのメリット
初期表示が速い
サーバー側でHTMLを生成して送信するため、ユーザーはページがすぐに表示され、コンテンツを早く確認できます。これにより、初期表示速度が向上し、ユーザー体験が良くなります。
SEOに有利
検索エンジンのクローラーはサーバーから受け取ったHTMLをすぐにインデックス化できます。CSRの場合、クローラーがJavaScriptを実行する必要があり、正しくインデックスされない可能性がありますが、SSRではその心配がありません。
シンプルなクライアントサイド
クライアント（ブラウザ）での処理が軽くなるため、ユーザーのデバイスに負担をかけず、低スペックのデバイスでも快適に利用できます。
SSRのデメリット
サーバーの負荷が増加
ページをレンダリングする作業がサーバー側で行われるため、トラフィックが多い場合や動的なコンテンツが多い場合、サーバーの負荷が増加する可能性があります。
インタラクティブ性が遅れることがある
ページが初期表示されても、クライアントサイドでJavaScriptが動作するまでインタラクション（クリックやスクロールなど）が動かないことがあるため、その点はCSRに比べて遅れが出る場合があります。
SSRが使われる場面
SEOが重要なサイト
ブログやECサイトなど、検索エンジンでの表示が重要なサイトでは、SSRがよく使われます。
パフォーマンス重視のアプリケーション
初期表示速度を上げるため、SSRはページの読み込み体験を向上させるのに役立ちます。
SSRを使ったフレームワーク
SSRを使用したフレームワークは以下が挙げられます。
- Next.js: ReactアプリケーションでSSRを実現するために広く使われているフレームワーク。
- Remix: サーバーサイドレンダリングとクライアントサイドのパフォーマンス最適化に強いフレームワーク。
ReactでSSRをする方法をまとめたコンテンツもありますのでよかったらご覧ください。
まとめ
SSRは、サーバー側でHTMLを生成してクライアントに送信する技術で、ページパフォーマンスやSEOに大きなメリットを持ちます。
