CSR
client side renderingの略。
名前の通り、クライアント側でレンダリングをする。
流れ
- サーバから枠組みのhtmlとjsが来る
- クライアントで、jsを実行して、htmlを完成させる
なので、描画が開始されてから、描画が完了するまでの間に差がある。
利点
- サーバとクライアントのコードを明確に分離できる
- webアプリケーション全体が最初のリクエストでロードされるため、その後サーバにリクエストする必要がない
欠点
- webクローラとの相性が悪い
webクローラは最初にロードされたhtmlのみを解析するが、CRSの場合はほとんど空なので、きちんと解釈されない。 - 最初にページがロードされるまで少し時間がかかる
- イベント発生時にAPIを使用してデータを取得すると、時間がかかるかも
SSR
server side renderingは、サーバ側でリクエストに応じて完全なhtmlを生成する。
クライアントはそれを受け取って、表示するだけ。
SSRではすべてのリクエストが独立しており、すべて1から処理して生成する必要がある。
利点
- CSRに比べてjsが少なくなるため、描画が完了するまでが早い
- webクローラとの相性が良い
欠点
- TTFBが遅い
- ちょっとした動作でもすべてロードする必要がある