TERM 035
SSR
サーバーでHTMLを組み立ててから届ける
SSRは、リクエストを受けたサーバーがデータを取得し、その時点のHTMLを生成してブラウザへ返すレンダリング方式です。利用者はJavaScriptの実行完了前から内容を読めます。
サーバーでHTMLを組み立ててからブラウザへ返す描画方式の全体像。
CONTENTSこの記事の目次＋
QUICK OVERVIEW
30秒でつかむ
表示前のデータ取得
秘密情報をブラウザへ渡さず、サーバーからデータへ接続できます。
内容入りの初期応答
検索エンジンや共有先も主要内容を読み取りやすくなります。
クライアント機能の接続
表示済みHTMLへ操作や状態管理を結び付けます。
01 — DEFINITION
SSRとは
何か
SSRは、リクエストを受けたサーバーがデータを取得し、その時点のHTMLを生成してブラウザへ返すレンダリング方式です。利用者はJavaScriptの実行完了前から内容を読めます。
02 — HOW IT WORKS
仕組みを
3段階で見る
細部へ入る前に、入力から結果までの役割を順番に捉えます。
ページを要求
ブラウザがURLへアクセスする。
→サーバーで生成
必要なデータを取得し、HTMLへ埋め込む。
→操作可能にする
HTML表示後、必要なJavaScriptがイベントを接続する。
SSRを理解するときの、最小の処理単位です。
03 — ESSENTIALS
押さえるべき
3つの要点
名前だけでなく、この3点の関係まで理解すると実装へつなげやすくなります。
表示前のデータ取得
秘密情報をブラウザへ渡さず、サーバーからデータへ接続できます。
内容入りの初期応答
検索エンジンや共有先も主要内容を読み取りやすくなります。
クライアント機能の接続
表示済みHTMLへ操作や状態管理を結び付けます。
04 — REAL WORLD EXAMPLE
商品詳細ページを表示する
URLごとの商品情報を、最初の画面から検索・閲覧できるようにします。
- 01
サーバーがURLから商品IDを読む
- 02
商品と在庫を取得してHTMLを生成する
- 03
ブラウザが表示後にカート操作を有効化する
05 — WATCH OUT
理解するときの
注意点
便利な仕組みほど、守備範囲と失敗の前提を明確にします。
要求ごとの処理量を抑える
Cacheや事前生成を組み合わせ、同じ計算を毎回繰り返しません。
Hydration差分を作らない
サーバーとブラウザで異なる初期値を描画すると、表示崩れや警告が起こります。
IN ONE SENTENCE
SSRとは？
サーバーでHTMLを組み立ててからブラウザへ返す描画方式。