Next.jsのチュートリアルをやってみる【レンダリング編】

前回

2024年8月30日 Next.jsのチュートリアルをやってみる【データの取得編】

はじめに

前回はダッシュボードページにてデータを取得する方法を学びました。ダッシュボードページは静的レンダリングで生成されたページであるため、データの更新はアプリケーションに反映されません、今回は動的に反映する方法を学びたいと思います。

静的レンダリングとは

データのフェッチとレンダリングはビルド時（デプロイ時）またはデータの再検証時にサーバー上で行われます。ユーザーがアプリケーションにアクセスするたびに、キャッシュされた結果が提供されます。

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

動的レンダリング

動的レンダリングはユーザーからのリクエスト時に各ユーザーに対してサーバー上でコンテンツがレンダリングされます。

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

現在のチュートリアルで作成しているダッシュボードアプリは動的です。しかし前回のチュートリアルで発生した以下の問題があります。

複数のデータ取得のうち、一つのデータリクエストがほかのリクエストより遅い場合、遅いデータリクエストが完了するまで、UIが表示されなくなってしまいます。

このような問題を再現するためにシミュレートしてみましょう。data.tsファイルでfetchRevenue()内のconsole.logとsetTimeoutのコメントを外しましょう。

export async function fetchRevenue() {
  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.');
  }
}

サーバーが起動されていることを確認したら、http://localhost:3000/dashboard/にアクセスし、ページの読み込みに時間がかかることを確認してください。

サーバーを起動しているコマンドプロンプトを確認すると、以下のようなメッセージを確認することができます。

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

ここでは、遅いデータフェッチをシミュレートするために、3秒の遅延を追加しました。その結果、データがフェッチされている間、ページ全体がユーザーにUIを表示するのをブロックしてしまいます。動的レンダリングでは、アプリケーションは最も遅いデータフェッチと同じ速度しか出せません。

次回はユーザーエクスペリエンスを向上させるための『ストリーミング』について学んでいきます。

まとめ

• 静的レンダリングは静的なブログ記事や製品ページなど、データのないUIやユーザー間で共有されるデータに便利。
• 動的レンダリングはデータが頻繁に変更されるアプリケーションに最適。

次回

2024年9月6日 Next.jsのチュートリアルをやってみる【ストリーミング編】