CSR

CSR は Client Side Rendering の略で、ブラウザ側の JavaScript が実行されてから画面を組み立てる描画方式です。
React や Vue を使ったフロントエンドではよく出てきて、SPA を実現するときの基本パターンでもあります。

最初に HTML がほぼ空の状態で返り、そのあと API やデータ取得をしながら画面を完成させることが多いので、設計次第では初回表示が遅く見えることがあります。
その代わり、一度読み込んだあとに画面を細かく切り替えるのは得意です。

まず押さえたいポイント

• ブラウザ側で画面を描画する方式
• SPA と一緒に出てくることが多い
• 初回表示と操作感のバランスを見ることが大事

実務で見るポイント

• 管理画面や会員向け機能で使いやすい
• SEO や OGP では SSR など別方式も検討した方がよいことがある
• JavaScript バンドルの重さが体感速度に直結しやすい

よく一緒に出てくる用語

• ブラウザ側描画と相性がよい SPA
• 比較対象として出る SSR
• 画面全体を読み直す MPA