静的および動的レンダリング

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

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

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

取り上げるトピックは以下の通りです。

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

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

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

遅いデータ取得をシミュレートして、何が起こるか見てみましょう。

静的レンダリングとは？

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

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

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

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

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

動的レンダリングとは？

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

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

遅いデータ取得のシミュレーション

構築中のダッシュボードアプリケーションは動的です。

しかし、前の章で言及された問題がまだ1つあります。1つのデータリクエストが他のすべてのリクエストよりも遅い場合はどうなりますか？

遅いデータ取得をシミュレートしましょう。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の表示がページ全体でブロックされるようになりました。これは、開発者が解決しなければならない一般的な課題の1つです。

動的レンダリングでは、アプリケーションは最も遅いデータ取得と同じくらいしか速くありません。