SSRについて簡単に説明
SSRという技術用語はServer Side Renderingの省略です。SSRは、サーバー側でHTML、CSSレンダリングを行うことを特徴としてます。
ユーザーのブラウザから、特定なページURLへ遷移するたびサーバー側にリクエストを受け取り、そのままサーバー側でAPIと連携をして、APIのレスポンスデーターと組み合わせて、HTMLレンダリングが行われます。生成されたHTMLをブラウザに返すことになります。
SSRはNext.js、Nuxt.js等のフレームワークを使うことで比較的手軽に実装することができます。
SSRのアーキテクチャ
SSRを利用しているサイトでブラウザーのリクエストがどのように実行されているかは、下記の図で理解できます。
- ブラウザーがURLページのリクエストを送信。
- サーバー側はAPI連携でデーターを取得。
- サーバーがデーターを所得してから、希望なデーターを含むレンダリングHTMLを生成。
- ブラウザーに非インタラクティブなHTMLファイルにをす。
- ブラウザに届きた非インタラクティブなページが表示される
- ブラウザーがHTMLに置いてるJavaScriptファイルをロードする
- ブラウザがフレームワークを実行ページがインタラクティブになる
8と９の処理はJavascriptの処理でSPA（Single Page Application）と同じです。例えば、ボタンを押すときなどに、ブラウザー側Javascript処理が行われて、データ取得と再レンダリングを回すことになっています。
SSRのメリット
SEO対策
Google 検索エンジンはページの読み込み速度により、優先的に検索順位を与えるようになってます。
読み込み速度が早くなるとユーザーのセッション時間やサイトの直帰率なども改善されます。
SSRが導入されるサイトに対して、Google クローラーがページリクエストすると、レンダリング済みHTMLがすぐに返されることで、ページ全体にインデックスされることになります。
ユーザーエクスペリエンスが向上
サーバー側でレンダリングされたアーキテクチャのお陰で、CSR(Clinet Side Renderingの省略)より、SSRを利用するサイトはページの読み込みが速くなり、ユーザーエクスペリエンスが向上するはずです。
さらに、SSR はユーザーのネットワーク環境・デバイスのスペックに依存されないため、安定的な配信を提供できます。（レンダリング処理をサーバー側で行う）
ページキャッシュが最適化
SSR を行うことで、サーバーサイドでレンダリングされた結果（HTML/JS）をキャッシュさせる事ができます。
Cloud Front などの CDN を利用することで、オリジンサーバの代わりにコンテンツを配信することができ、表示速度などのパフォーマンスを向上できます。
ただ、キャッシュを利用する場合はどのタイミングでキャッシュを削除するかなどのキャッシュ戦略について検討が必要です。