Chapter8 Static and Dynamic Rendering

[ShotaroHirose59]

In the previous chapter, you fetched data for the Dashboard Overview page. However, we briefly discussed two limitations of the current setup:

1. The data requests are creating an unintentional waterfall.
2. The dashboard is static, so any data updates will not be reflected on your application. https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering

Topics

• What static rendering is and how it can improve your application's performance.
• What dynamic rendering is and when to use it.
• Different approaches to make your dashboard dynamic.
• Simulate a slow data fetch to see what happens.

[ShotaroHirose59]

静的レンダリング VS 動的レンダリング

What is Static Rendering?

static renderingではデータフェッチとコンポーネントのレンダリングはビルド時に行われる。 CDN配信してキャッシュすることが可能

Vercelにデプロイした場合は、2回目のリクエストからはCDNから配信されたはず

どんな利点がある？

• プリレンダリングされたコンテンツは、ページが読み込まれた時点ですでに利用可能な状態になっているため、検索エンジンのクローラーがインデックスしやすくなる

どんな時に使う？ 静的なブログ記事や製品ページなど、データのないUIやユーザー間で共有されるデータに有効

What is Dynamic Rendering?

リクエスト時に書くユーザに対してサーバー上でコンテンツがレンダリングされる

• リアルタイムまたは頻繁に更新されるデータを表示できる
• パーソナライズされたコンテンツを提供可能、データを更新も可能
• クッキーやURL検索パラメータなど、リクエスト時にしかわからない情報にアクセス可能

[ShotaroHirose59]

Making the dashboard dynamic

サーバーコンポーネントやデータフェッチ関数の内部でunstable_noStoreを使うと静的レンダリングをオプトアウトできる

import { unstable_noStore as noStore } from 'next/cache';

export async function fetchLatestInvoices() {
  noStore();

Note

unstable_noStore is an experimental API and may change in the future. If you prefer to use a stable API in your own projects, you can also use the Segment Config Option export const dynamic = "force-dynamic".

export const dynamic = "force-dynamic".を定義するとデータフェッチがカラムコンポーネントは全て動的レンダリングになる

Next.jsのheaders()やcookies()を使った場合も動的レンダリングになる

動的レンダリングにもキャッシュの仕組みが搭載されているのか、あとで確認する

[ShotaroHirose59]

ダイナミック・レンダリングでは、アプリケーションは最も遅いデータ・フェッチと同じ速度しか出せない