CSR(クライアントサイドレンダリング)

1. フロントからCDNにリクエスト
2. CDNからフロントにhtml・css・jsレスポンス
3. リクエストに応じてフロントが画面描画(がわだけ作るイメージ)
4. APIリクエストでバックエンドからJSONがレスポンス
5. がわだけだったページがJSONによって中身も伴ったページになる

メリット

• 必要なコードだけを取得してページを描画するため、初期読み込み以降の速度が高速。

デメリット:

• クライアント側でページを描画するため、初期読み込み時に必要なJavaScriptやCSSのサイズが大きい場合、ページの読み込み速度が遅くなる可能性がある。

SSR(サーバーサイドレンダリング)

1. フロントからサーバーにリクエスト
2. サーバーでhtml・css・jsが描画されフロントへレスポンス
3. リクエストが来る度に同じ流れが繰り返される

メリット:

• JavaScriptに依存しないため、ブラウザがJavaScriptを無効にしていても正しく表示される。

デメリット:

• リクエストの度にサーバー側でページを描画するため、ページの読み込み速度が遅くなる可能性がある。