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

前章では、ダッシュボードの概要ページにデータをフェッチしました。しかし、現在の設定には2つの制限があると簡単に説明しました。

1. データリクエストが意図しないウォーターフォールを生成しています。
2. ダッシュボードは静的なため、データの更新がアプリケーションに反映されません。

本章では...

ここでは、以下のトピックについて説明します。

静的レンダリングとは何か、そしてそれがアプリケーションのパフォーマンスをどのように向上させるか。

動的レンダリングとは何か、そしていつそれを使用するか。

ダッシュボードを動的にするための異なるアプローチ。

何が起こるかを確認するために、遅いデータフェッチをシミュレートします。

静的レンダリングとは？

静的レンダリングでは、データのフェッチとレンダリングは、ビルド時（デプロイ時）またはデータの再検証時にサーバー上で行われます。

ユーザーがアプリケーションにアクセスするたびに、キャッシュされた結果が提供されます。静的レンダリングにはいくつかの利点があります。

• より高速なウェブサイト - プリレンダリングされたコンテンツは、Vercelのようなプラットフォームにデプロイされると、キャッシュされてグローバルに配布されます。これにより、世界中のユーザーがより迅速かつ確実にウェブサイトのコンテンツにアクセスできるようになります。
• サーバー負荷の軽減 - コンテンツがキャッシュされるため、サーバーは各ユーザーリクエストに対して動的にコンテンツを生成する必要がありません。これにより、計算コストを削減できます。
• SEO - プリレンダリングされたコンテンツは、ページロード時にコンテンツがすでに利用可能であるため、検索エンジンのクローラーがインデックスを作成しやすくなります。これにより、検索エンジンのランキングが向上する可能性があります。

静的レンダリングは、静的なブログ投稿や製品ページのように、データがないUIやユーザー間で共有されるデータに適しています。定期的に更新されるパーソナライズされたデータを持つダッシュボードには、あまり適していないかもしれません。

静的レンダリングの反対は動的レンダリングです。

動的レンダリングとは？

動的レンダリングでは、コンテンツはリクエスト時（ユーザーがページにアクセスしたとき）に各ユーザー向けにサーバー上でレンダリングされます。動的レンダリングにはいくつかの利点があります。

• リアルタイムデータ - 動的レンダリングにより、アプリケーションはリアルタイムまたは頻繁に更新されるデータを表示できます。これは、データが頻繁に変化するアプリケーションに最適です。
• ユーザー固有のコンテンツ - ダッシュボードやユーザープロファイルなどのパーソナライズされたコンテンツを提供し、ユーザーの操作に基づいてデータを更新するのが容易になります。
• リクエスト時の情報 - 動的レンダリングにより、CookieやURL検索パラメータなど、リクエスト時にのみ知ることができる情報にアクセスできます。

遅いデータフェッチのシミュレーション

私たちが構築しているダッシュボードアプリケーションは動的です。

しかし、前章で述べた問題がまだ一つあります。もしあるデータリクエストが他のすべてよりも遅かったらどうなるでしょうか？

遅いデータフェッチをシミュレートしてみましょう。app/lib/data.tsで、fetchRevenue()内のconsole.logとsetTimeoutのコメントを解除してください。

export async function fetchRevenue() {
  try {
    // We 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;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

新しいタブでhttps://:3000/dashboard/を開き、ページの読み込みに時間がかかることに注目してください。ターミナルには、以下のメッセージも表示されるはずです。

Fetching revenue data...
Data fetch completed after 3 seconds.

ここでは、遅いデータフェッチをシミュレートするために、人為的に3秒の遅延を追加しました。その結果、データがフェッチされている間、ページ全体が訪問者へのUI表示をブロックされてしまいます。これは、開発者が解決しなければならない共通の課題につながります。

動的レンダリングでは、アプリケーションの速度は最も遅いデータフェッチに依存します。