SSRとCSR

Webページの表示（レンダリング）を どこで行うか の違いが、SSRとCSRです。

• CSR（クライアントサイドレンダリング）… ブラウザ 側の JavaScript が、API からデータを取って画面を組み立てる。SPA の基本形。
• SSR（サーバーサイドレンダリング）… サーバー 側で完成したHTMLを組み立てて返す。ブラウザは受け取ってすぐ表示できる。

flowchart LR
  subgraph CSR
    C1[サーバー] -->|"最小のHTML＋JS"| C2[ブラウザが組み立て]
  end
  subgraph SSR
    S1[サーバーが組み立て] -->|"完成HTML"| S2[ブラウザは表示のみ]
  end

SSRは初回表示が速く、検索エンジンに内容が伝わりやすい（SEO に有利）反面、サーバーの負荷が増えます。CSRは操作の反応が軽快な反面、初回が重く、対策しないとSEOに不利になりがちです。

近年は、初回はSSR、その後はCSRのように 両方の良いとこ取り をする作り方が主流で、Next.js や Astro などがこれを支えています。