【08】Next.js app routerのチュートリアルやってみる(静的レンダリングと動的レンダリング)

はじめに

Next.js app routerのチュートリアルの第８章のアウトプットします。

前の記事

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

【02】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8

【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74

【04】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/62f9beccbfe36eaf7f90

【05】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/8b71b1d1df7c9435a9c9

【06】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/58130c3cfbaf8a573de2

【07】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/2c2da0f8071e60454679

第８章 静的レンダリングと動的レンダリング

この章では下記を学習しました。

• 静的レンダリングとは
• 動的レンダリングとは

静的レンダリング

静的レンダリングでは、データのフェッチとレンダリングがビルド時 (デプロイ時) または再検証中にサーバー上で行われます。結果はコンテンツ配信ネットワーク (CDN)に配布およびキャッシュできます。

ユーザーがアプリケーションにアクセスするたびに、キャッシュされた結果が提供されます。

静的レンダリングの利点としては、

• Webサイトの高速化 - 事前にレンダリングされたコンテンツをキャッシュしているため。ユーザーがアクセスしたときのリクエストが高速になります。
• サーバー負荷の軽減 - コンテンツがキャッシュされているため、サーバーはユーザーのリクエストごとにコンテンツを動的に生成する必要がありません。
• SEO - 事前にレンダリングされたコンテンツは、検索エンジンのクローラーに認識されるため、検索結果のらんキングが向上する可能性があります。

データのないUI、静的なブログ投稿や製品ページなど、ユーザー間で共有されるデータを表示する際に役立ちます。

ですが、リアルタイムな情報を提供するダッシュボードなどには適さない可能性があります。

動的レンダリング

動的レンダリングでは、リクエスト時(ユーザーがページにアクセスしたとき)に、各ユーザーのコンテンツがサーバー上でレンダリングされます。

• リアルタイムデータ - リアルタイムまたは、頻繁に更新されるデータを表示できます。
• ユーザー固有のコンテンツ - ダッシュボードやユーザープロフィールなどのユーザー情報によってページを更新することが簡単になります。
• リクエスト時の情報 - CookieやURL検索パラメータなど、リクエスト時のみ知ることができる情報にアクセスできる。

以下のコードでは、next/cachからunstable_noStoreをimportし、noStoreとして使用しています。

これにより、サーバーはキャッシュを返さず、動的レンダリングを実装できます。

/app/lib/data.ts

// ...
import { unstable_noStore as noStore } from 'next/cache';
 
export async function fetchRevenue() {
  // Add noStore() here to prevent the response from being cached.
  // This is equivalent to in fetch(..., {cache: 'no-store'}).
+ noStore();
 
  // ...
}

unstable_noStore はunstable(不安定)と書いてあるように、実験的なAPIであり、将来変更される可能性があるそうです。

安定したAPIを使用したい場合は下記を参照してください。
https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

これにより、動的レンダリングを実装できたのですが、

動的レンダリングを使用すると、アプリケーションは最も遅いデータフェッチと同じ速度でしか動作しません。

そのため、読み込みなおすたびにページ全体がロックされてしまいます。

おわりに

次回からその解決方法を見てみましょう。

次の記事