CSR/SSR/SSG/ISRのレンダリングの違いを体験することができるプログラムです。

記事はこちら↓↓↓

https://qiita.com/vivy/items/bfa689d5b137360db2ff

バックエンドの代わりとして、モックAPIを作成できるツールであるjson-serverを使用します。データはdb.jsonに格納されています。

npm install

npx json-server --watch db.json -p 3001

以下のコマンドを新たなターミナルで実行します。

npm run build

npm start

これらのコマンドを実行してローカルホスト3000番にアクセスすると以下のような画面が出力されます。

各ボタンを押すと表示されているレンダリング方法でレンダリングしたページが表示されます。

データの追加を行うことでより違いを実感することができます。 以下のコマンドを新たなターミナルで実行することでデータを追加することができます。

curl -X POST http://localhost:3001/products \
-H "Content-Type: application/json" \
-d '{"title": "New Product"}'

CSR, SSRはすぐに変更が反映されます。SSGは変更が反映されません。ISRは30秒ごとにビルドされるため、即座に変更が反映がされません。 反映したい場合はビルドによって生成された.nextファイルを削除し、もう一度npm run buildしてみてください。