CSR は Client Side Rendering の略で、ブラウザ側の JavaScript が実行されてから画面を組み立てる描画方式です。
React や Vue を使ったフロントエンドではよく出てきて、SPA を実現するときの基本パターンでもあります。
最初に HTML がほぼ空の状態で返り、そのあと API やデータ取得をしながら画面を完成させることが多いので、設計次第では初回表示が遅く見えることがあります。
その代わり、一度読み込んだあとに画面を細かく切り替えるのは得意です。
まず押さえたいポイント
- ブラウザ側で画面を描画する方式
- SPA と一緒に出てくることが多い
- 初回表示と操作感のバランスを見ることが大事
実務で見るポイント
- 管理画面や会員向け機能で使いやすい
- SEO や OGP では SSR など別方式も検討した方がよいことがある
- JavaScript バンドルの重さが体感速度に直結しやすい