CSR, SSR, SSG の基礎を学ぶ

投稿の目的

最近、レンダリング技術であるCSR, SSR, SSGについて勉強したので備忘録としてまとめます。
周りのエンジニアの方にも教えていただきながらまとめましたが、理解が追いつかなかった部分もあると思います。誤りがあれば、是非ご指摘いただきたいです。

始める前にSPAについて触れる。

SPAは最初のリクエストでサーバーから受け取った一つのファイルでルーティングを行うアプリケーションのことを指します。
SPAをCSR, SSR, SSGと比較する記事を見かけることがありますが、厳密には比較することはできません。

SPA登場以前、WEBサーバーがURL構造に基づいてページ内コンテンツの出しわけを行なっていました。そのルーティングを、クライアント側に渡されたファイルが行っているのがSPAです。
ルーティングを行うファイルがJSである必要はありません。（現在はJSが主流というだけです。）

CSR（Client Side Rendering）

• 1.：クライアントからWEBサーバーへリクエストが届く。
• 2.：WEBサーバーからクライアントへ、そのページを表示させるためのファイルが送られる。
• 3.：２回目以降のリクエストは、クライアント上に存在するファイルが行う。リクエストはAPIサーバーへ届く。
• 4.：APIサーバーからクライアントへデータが返される。APIサーバーから取得したデータをもとに、ページコンテンツが生成される。

2. のフローで送られたファイルがクライアント上で動き、ページコンテンツがレンダリングされます。

SSR（Server Side Rendering）

• 1.：クライアントからWEBサーバーへリクエストが届く。
• 2.：WEBサーバーは、クライアントからのリクエストを元に、ページコンテンツ生成に必要なデータをAPIサーバーへリクエストする。
• 3.：APIサーバーは要求されたデータをWEBサーバーに返す。
• 4.：生成されたファイルをクライアントに返す。
• 5.：２回目以降のリクエストは、クライアント上に存在するファイルが行う。リクエストはAPIサーバーへ届く。
• 6.：APIサーバーからクライアントへデータが返される。APIサーバーから取得したデータをもとに、ページコンテンツが生成される。

2. 3. のフローの時、WEBサーバー上でページコンテンツがレンダリングされます。
その際のレンダリングをSSR（サーバーサイトレンダリング） と言います。

SSG（Static Site Generation）

• 1.：ローカルからAPIサーバーへリクエストが届く。
• 2.：APIサーバーは要求されたデータをローカルに返す。
• 3.：クライアントからWEBサーバーへリクエストが届く。
• 4.：WEBサーバーからクライアントへ、そのページを表示させるための全てのファイルが送られる。
• 5.：２回目以降のリクエストは、クライアント上に存在するファイルが行う。リクエストはAPIサーバーへ届く。
• 6.：APIサーバーからクライアントへデータが返される。APIサーバーから取得したデータをもとに、ページコンテンツが生成される。

1. 2. のフローはビルド時に行われ、ページコンテンツがレンダリングされます。
その際のレンダリングをSSG（Static Site Generation） と言います。
ビルド後もファイルは、WEBサーバーにおかれます。