越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

[Next.js]SSG/CSR/SSR/ISRの違いとそれぞれ実際動かしてみた

テクニック

SSG/CSR/SSR/ISRNext.jsで使用可能な4つのレンダリング手法の略称のことです。まず、その違いは

SSG: Static Site Generation

ビルド時にデータを取得して静的ページとして生成します。既に生成されたページをユーザに見せるためサーバーの負荷が少なく応答速度が速いです。通常、広告やブログページなど一回作った後更新の必要がほぼない方には最適です。ただ、何かが変わると、更新の度にビルドや配布をしないと反映されないですので、動的なコンテンツを含む際には使用しないです。

そういった場合は、最新のデータを反映するために、以下の手法が使われます。

SSR: Server Side Rendering

ページでアクセスがある度に、サーバーにリクエストしてデータを取得するため、サーバーに負荷がかかリます。

CSR: Client Side Rendering

ビルド時データ取得を行わずに、ブラウザで初期描画した後に非同期で取得します、なので初期の読み込みが比較的に重く、後からデータを取得して反映するためSEOには弱いです。

ISR: Incremental Static Regeneration

SSG と同等の表示速度のまま、データの更新にも対応できます。ビルド時点でページを生成してくれるのはSSGと同様で、一定時間が経つ(設定した時間)とページを再生成してくれます。

動かしてみる

1.テスト用apiを用意(https://mockapi.io/で新規作成、一部モックデータはhttps://jsonplaceholder.typicode.com/から)

2.npx create-next-app で新規Next.jsプロジェクトを作成

3.pagesフォルダの直下に以下のそれぞれファイルを作成(わかりやすくするため各手法の略称で)

4.先にビルドしてみると

4.npm startで立ち上げ (ユーザー側の動きを確認するため本番で動かせます)

CSRは画面が点滅しますが、ページのロード完了後apiを呼び出しているからです。それ以外は見る限りは同じようです。

5.データを変えて再度確認すると

CSR:点滅を伴い更新が反映

SSR:点滅なしで更新が反映

SSG:  更新が反映されない

ISR:  設定時間後に反映

まとめ

違いとそのメリットデメリットについて知っておくことは大事で、状況によって切り替えて使う必要があるなと思いました。