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

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

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

このチャプターでは...

ここで扱うトピックは以下のとおりです。

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

動的レンダリングとは何か、そしていつそれを使うべきか。

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

低速のデータフェッチをシミュレートして、何が起こるかを確認する。

静的レンダリングとは？

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

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

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

静的レンダリングは、データがない、またはユーザー間で共有されるデータがある UI（静的なブログ投稿や製品ページなど）に役立ちます。定期的に更新される個人データを含むダッシュボードには適さない場合があります。

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

動的レンダリングとは？

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

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

低速のデータフェッチのシミュレート

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

ただし、前のチャプターで述べた問題が1つ残っています。1つのデータリクエストが他のすべてのリクエストよりも遅い場合はどうなりますか？

低速のデータフェッチをシミュレートしてみましょう。 `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.rows;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

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

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

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

動的レンダリングでは、アプリケーションの速度は最も遅いデータフェッチの速度と同じです。