TERM 010
CSR
ブラウザで画面を組み立てるレンダリング方式
CSRは、最初にJavaScriptと最小限のHTMLを受け取り、ブラウザ上でデータ取得と画面生成を行う方式です。ページ遷移後の操作をアプリのように滑らかにできます。
ブラウザ上で画面のHTMLを組み立てる描画方式の全体像。
CONTENTSこの記事の目次＋
QUICK OVERVIEW
30秒でつかむ
実行コード
初回表示に必要なJavaScript量が体感速度へ影響します。
画面状態
入力、選択、取得結果をブラウザ内で管理します。
画面遷移
ページ全体を再読込せずURLと表示を切り替えます。
01 — DEFINITION
CSRとは
何か
CSRは、最初にJavaScriptと最小限のHTMLを受け取り、ブラウザ上でデータ取得と画面生成を行う方式です。ページ遷移後の操作をアプリのように滑らかにできます。
02 — HOW IT WORKS
仕組みを
3段階で見る
細部へ入る前に、入力から結果までの役割を順番に捉えます。
土台を受け取る
ブラウザがHTMLとJavaScriptを読み込む。
→データを取得
JavaScriptがAPIへ必要な情報を要求する。
→画面を生成
取得結果からDOMを組み立てて表示する。
CSRを理解するときの、最小の処理単位です。
03 — ESSENTIALS
押さえるべき
3つの要点
名前だけでなく、この3点の関係まで理解すると実装へつなげやすくなります。
実行コード
初回表示に必要なJavaScript量が体感速度へ影響します。
画面状態
入力、選択、取得結果をブラウザ内で管理します。
画面遷移
ページ全体を再読込せずURLと表示を切り替えます。
04 — REAL WORLD EXAMPLE
分析ダッシュボードを操作する
利用者が期間や指標を何度も切り替える画面を作ります。
- 01
初回に操作UIと実行コードを読み込む
- 02
条件変更ごとに必要なデータだけ取得する
- 03
画面の該当部分を更新する
05 — WATCH OUT
理解するときの
注意点
便利な仕組みほど、守備範囲と失敗の前提を明確にします。
初回表示を重くしない
コード分割や遅延読込で、最初に必要なJavaScriptを減らします。
検索・共有要件を確認する
公開コンテンツではSSRや事前生成を組み合わせる方が適する場合があります。
IN ONE SENTENCE
CSRとは？
ブラウザ上で画面のHTMLを組み立てる描画方式。