CSR
読み
シーエスアール
意味
- ブラウザ上でJavaScriptを実行しHTMLを動的に生成して画面を描画するクライアントサイドレンダリング方式
- 初回ロード時は空に近いHTMLを受け取りその後JavaScriptでコンテンツを構築するSPA（Single Page Application）の主要技術
- ページ遷移時にサーバーと通信せずブラウザ内で画面を切り替えるため操作が高速だが初期表示とSEOに課題がある手法
比喩
レストランで注文を受けてから料理を作るイメージ。お客さんの目の前で調理が始まる。
語源
Client-Side Rendering＝クライアント側でのレンダリング。SSRと対比される概念
例文
- ReactでCSRアプリを構築し初回ロードは遅いがページ遷移は瞬時に完了した
- CSRだとクローラーがJavaScript実行前のHTMLしか見ないためSSRやSSGと併用してSEO対策した
- APIから取得したデータをCSRで動的に表示しユーザー操作に応じてリアルタイム更新した
よくある勘違い
- CSRとSSRの違いが分からない→CSRはブラウザで描画、SSRはサーバーで描画してからブラウザに送る
- CSRなら全てのページで高速だと思い込むこと→初回ロードは重いJavaScriptバンドルのダウンロードが必要