CSR
Client-Side Rendering
Webページの表示処理を、サーバーではなく使う人のブラウザ側で行う仕組み。
簡単に説明すると
CSRは、ホームページを開いたときに、スマホやパソコンのブラウザの中でデータを組み立てて画面を表示する仕組みだよ。 サーバーからは最低限の骨組みとデータだけを受け取り、ブラウザが処理を行って画面を完成させるんだ。 ボタンを押したときに画面全体を読み込み直さず、変わった部分だけをスムーズに書き換えるWebサイトなどでよく使われているよ。
名前のヒミツ
CSRは、英語のClient-Side Renderingの頭文字をとった言葉だよ。 Clientはウェブサイトを見るブラウザのことで、Sideはその側、Renderingは画面を組み立てて映し出すことを意味しているんだ。 つまり、使う人の手元にあるブラウザで画面を作るという意味だよ。
くわしく見てみよう！
CSRとは、Webページの画面を組み立てる処理を、サーバーではなくユーザーが使っているブラウザ側で行う技術のことだよ。
かんたんに言うと、ページの土台となるデータだけを先に読み込んで、中身はブラウザがその場で作り上げる仕組みなんだよ。
従来のWebページでは、サーバー側で完成させた画面のデータをブラウザに送って表示していたんだよ。
一方で、CSRを使うとサーバーの負担が減り、ページの一部だけを素早く書き換えることができるようになるんだ。
そのため、SNSのタイムラインのように、スクロールするたびに新しい情報が次々と表示されるようなWebサイトなどで使われることがあるよ。
ただし、最初にページを開いたときは、ブラウザ側で組み立てる処理を行うためのプログラムを読み込む必要があるんだ。
そのため、最初の1回目の表示には少し時間がかかることがあるという特徴もあるよ。
ページの目的や使いやすさに合わせて、サーバー側で画面を作る仕組みと使い分けられているんだ。