CSR/SSR/SSGについてざっくり解説

はじめに

Next.jsを勉強し始めたいのですが、CSR/SSR/SSGなどの単語の意味がわからないため、それらについてざっくり理解していきます。

CSR(Client Side Rendering)

CSR(Client Side Rendering)は、空のHTMLでクライアント側からデータを取得してレンダリングする方法です。

ブラウザ(クライアント)からリクエストが送られるとWebサーバはほぼ空のHTMLを返します。その後、ブラウザからAPIを叩いてデータを取得し、取得したデータでレンダリングします。

SPA(Single Page Application)と同義で使われます。

SSR(Sever Side Rendering)

SSR(Sever Side Rendering)は、HTMLをリクエストごとにサーバ側で生成する方法です。

データの取得とレンダリングをサーバ側で行い、リクエストごとにHTMLを生成します。

初期データ以外はブラウザからAPIを叩くと記載されている記事もいくつかありましたが、Next.jsの公式ドキュメントではリクエストごとにHTMLを生成とありましたので、そのように説明しています。
公式ドキュメントでCSRと併用できるとあったので、併用した場合の説明なのかと思っていますが、もし誤っている場合は教えてください。
https://nextjs.org/docs/basic-features/pages

SSG(Static Site Generator)

SSG(Static Site Generator)は、ビルド時にあらかじめデータを取得し、HTMLを生成する方法です。

SSRとは異なり事前にHTMLを生成しています。ビルド時にAPIでデータを取得しHTMLが生成され、リクエストが送られてくるごとにそのHTMLが再利用されます。

まとめ

  • CSR:クライアント側でデータを取得しHTMLを生成
  • SSR:リクエストごとにサーバ側でHTMLを生成
  • SSG:ビルド時にサーバ側でHTMLを生成

NextではSSGを推奨してますが、組み合わせて利用もできます。

参考

タイトルとURLをコピーしました