SSRについて簡単に説明

SSRという技術用語はServer Side Renderingの省略です。SSRは、サーバー側でHTML、CSSレンダリングを行うことを特徴としてます。

ユーザーのブラウザから、特定なページURLへ遷移するたびサーバー側にリクエストを受け取り、そのままサーバー側でAPIと連携をして、APIのレスポンスデーターと組み合わせて、HTMLレンダリングが行われます。生成されたHTMLをブラウザに返すことになります。

SSRはNext.js、Nuxt.js等のフレームワークを使うことで比較的手軽に実装することができます。

SSRのアーキテクチャ

SSRを利用しているサイトでブラウザーのリクエストがどのように実行されているかは、下記の図で理解できます。

8と９の処理はJavascriptの処理でSPA（Single Page Application）と同じです。例えば、ボタンを押すときなどに、ブラウザー側Javascript処理が行われて、データ取得と再レンダリングを回すことになっています。

Google 検索エンジンはページの読み込み速度により、優先的に検索順位を与えるようになってます。
読み込み速度が早くなるとユーザーのセッション時間やサイトの直帰率なども改善されます。

SSRが導入されるサイトに対して、Google クローラーがページリクエストすると、レンダリング済みHTMLがすぐに返されることで、ページ全体にインデックスされることになります。

サーバー側でレンダリングされたアーキテクチャのお陰で、CSR(Clinet Side Renderingの省略)より、SSRを利用するサイトはページの読み込みが速くなり、ユーザーエクスペリエンスが向上するはずです。

さらに、SSR はユーザーのネットワーク環境・デバイスのスペックに依存されないため、安定的な配信を提供できます。（レンダリング処理をサーバー側で行う）

SSR を行うことで、サーバーサイドでレンダリングされた結果（HTML/JS）をキャッシュさせる事ができます。

Cloud Front などの CDN を利用することで、オリジンサーバの代わりにコンテンツを配信することができ、表示速度などのパフォーマンスを向上できます。

ただ、キャッシュを利用する場合はどのタイミングでキャッシュを削除するかなどのキャッシュ戦略について検討が必要です。