☘️

CSR、SSR、SSGの違い

2022/07/02に公開

CSR、SSR、SSGの違い

CSR

クライアントサイドレンダリング。
ブラウザ上でJavaScriptを実行してDOMを生成し、マウント後、コンテンツを表示させる方法。
ページの初期ロードでは、コンテンツは何も表示されず、Hydration後に表示される。
Create React Appで作成されたReactアプリケーションはこの方法でレンダリングされる。

No Pre-rendering
(画像元:https://nextjs.org/learn/basics/data-fetching/pre-rendering)

SSR

サーバーサイドレンダリング。
サーバーサイドでコンポーネントを評価、実行し、その結果をHTMLとミニマルなJavaScriptで配信する方法。
サーバーへのリクエストがある度に、サーバー側で処理を行い、HTMLが生成する。
Nuxt.js、Next.jsなどはこの方法でレンダリングされる。
初期ロードからコンテンツが表示され、その後Hydrationによって、インテラクティブな状態になる。(例、<Link /> でジャンプ可能な状態に)
CSRよりもパフォーマンスに優れ、SEOにも良いとされる。

Pre-rendering
(画像元:https://nextjs.org/learn/basics/data-fetching/pre-rendering)

Server-side Rendering
(画像元:https://nextjs.org/learn/basics/data-fetching/two-forms)

SSG

静的サイトジェネレーター。
SSRと同じく先にHTMLがサーバーサイドで生成される。
SSRとの違いは、HTMLの生成タイミングがビルド時となり、リクエストがある度CDNよりコンテンツが配信される。
ブログや、ヘルプサイト、Eコマースの商品リストなど静的なページで利用される。
HTMLの生成タイミングがビルド時になるため、SSRよりもパフォーマンスが良い。

Static Generation
(画像元:https://nextjs.org/learn/basics/data-fetching/two-forms)

使い分けについて

「ユーザのリクエストより事前に、ページをPre-renderingして良いか?」
「イエス」の場合は、SSGを使用する。
「ノー」の場合は、SSRかCSRを使用する。
Next.jsはページごとに、SSGかSSRかを設定できる。

参照元

This article is also available in English: https://dev.to/takuyakikuchi/the-difference-between-csr-ssr-and-ssg-2e0c

GitHubで編集を提案

Discussion