【8章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの8. Static and Dynamic Rendering に関するメモです

前章のメモ

【7章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの7. Fetching Data に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ学ぶこと ...

Next.jsの公式チュートリアルの該当ページ
学ぶこと
静的レンダリングとは何か？
動的レンダリングとは何か？
ダッシュボードを動的にする
遅いデータフェッチを再現する

Next.jsの公式チュートリアルの該当ページ

Learn Next.js: Static and Dynamic Rendering | Next.js

Understand how rendering works in Next.js, and make your dashboard app dynamic.

学ぶこと

静的レンダリングとは何か？、どのようにパフォーマンスを向上させるか？
動的レンダリングとは何か？、いつ使うのか？
ダッシュボードを動的にするためのアプローチ
遅いデータフェッチが何を起こすのか？

静的レンダリングとは何か？

サーバーコンポーネントにおけるデフォルトのレンダリング方法で

アプリのビルドやrevalidateの際にデータを取得＆レンダリングすること。

revalidateとは、
一定時間の経過や特定のイベントをトリガーとしてキャッシュを消去すること。
これにより、定期的に最新のデータを取得できる

ビルド時にレンダリングしたものはCDNにキャッシュされます。

ユーザに対してはキャッシュされた結果が返されるので下記のメリットがあります。

レスポンスが速い
サーバへの負荷が低い
ページ読み込み時にすでにレンダリングされているので、SEOに強い

常に最新のデータを表示できるわけではないので、ブログ記事や商品ページといった

比較的更新頻度が低く、どのユーザにも同じように表示されるページに適しています。

動的レンダリングとは何か？

ユーザのリクエストごとにレンダリングすること。

最新のデータが反映される
各ユーザにあったデータを表示できる
Cookieやクエリパラメータなどリクエスト時のパラメータを受け取れる

ダッシュボードやSNSのタイムラインなど

更新頻度が高いページやユーザごとに異なる表示となるページに適しています

ダッシュボードを動的にする

サーバーコンポーネントはデフォルトで静的レンダリングを使用します。

では、動的レンダリングを使用するにはどうすればよいでしょうか？

unstable_noStore というNext.js のAPIを呼び出すことで動的レンダリングにします

早速、前章で使用した /app/lib/data.ts で使ってみましょう！

とはいえ、next/cache から unstable_noStore をインポートして実行するのみ。

// 一部抜粋

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();

  //...
}

// 一部抜粋

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();

//...

}

みたいな感じで

fetchLatestInvoices
fetchCardData
fetchFilteredInvoices
fetchInvoicesPages
fetchFilteredCustomers
fetchInvoiceById

にもnoStore()を記述します

unstable_noStore は実験的なAPIなので仕様が変更される可能性があるみたいです
安定的なAPIを使いたい場合は、

を使ってみてください

遅いデータフェッチを再現する

ダッシュボードを動的レンダリングにできました！

ただ、前章でも触れた１つでもデータ取得に時間がかかるものがあった場合どうなるでしょうか？

実際にアプリケーションを使用して試してみます。

/app/lib/data.ts のfetchRevenue関数内のコメントを↓のように外していきます。

// 一部抜粋

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

  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue>`SELECT * FROM revenue`;

    console.log('Data fetch completed after 3 seconds.');

    return data.rows;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

// 一部抜粋

export async function fetchRevenue() {

// Add noStore() here to prevent the response from being cached.

// This is equivalent to in fetch(..., {cache: 'no-store'}).

noStore();

try {

// Artificially delay a response for demo purposes.

// Don't do this in production :)

console.log('Fetching revenue data...');

await new Promise((resolve) => setTimeout(resolve, 3000));

const data = await sql<Revenue>`SELECT * FROM revenue`;

console.log('Data fetch completed after 3 seconds.');

return data.rows;

} catch (error) {

console.error('Database Error:', error);

throw new Error('Failed to fetch revenue data.');

}

Promiseインスタンス＋setTimeout を使用することで指定した時間だけ待つことができます

引数に3000msと指定しているので3秒待つことになります。

つまり、この関数の処理に3秒＋αかかります。

ローカルサーバを起動して、http://localhost:3000/dashboard にアクセスすると

表示に時間がかかることがわかると思います

curlコマンドで時間を計測してみると。。。

// 3秒待つ処理を入れた前
$ curl -w"time_total: %{time_total}\n" -o /dev/null http://localhost:3000/dashboard
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 40461    0 40461    0     0  64364      0 --:--:-- --:--:-- --:--:-- 64325
time_total: 0.628620

// 3秒待つ処理を入れた後
$ curl -w"time_total: %{time_total}\n" -o /dev/null http://localhost:3000/dashboard
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 40461    0 40461    0     0   8638      0 --:--:--  0:00:04 --:--:-- 11620
time_total: 4.683759