ローダーの理解

以前、アプリを動的にする方法について説明しました。しかし、大量のデータを扱う場合、データの取得が遅くなり、アプリケーションのパフォーマンスに悪影響を及ぼすことがあります。

ここでは、データリクエストが遅い場合のユーザー体験を向上させるための戦略について詳しく見ていきます。

理論

広く使われている手法としてストリーミングがあります。

ストリーミングは、情報を一度にすべて送信するのではなく、小さな部分に分けて送信する方法です。長い旅を小さなステップに分けて、準備ができたら一歩ずつ進むイメージです。これにより遅延を回避し、すべての読み込みを待たずにウェブページの一部を表示・利用できるようになります。

Next.jsでは、ストリーミングを行う方法が2つあります：

• ウェブページ全体の場合は、loading.tsxというファイルを使用します；
• ウェブページの特定部分の場合は、<Suspense>を使用します。

これがどのように機能するか、さらに詳しく見ていきましょう。

ページ全体のストリーミング

loading.tsx フォルダ内に dashboard ファイルを作成し、ダッシュボードページ全体にローダーを追加。

• loading.tsx: Next.js の特別なファイルで、Suspense を利用。ページのメインコンテンツが読み込まれる間、一時的な UI（フォールバック UI）を表示するために使用。
• <Sidebar> は静的（変更されない）なため、すぐに表示される。動的コンテンツの読み込み中でもユーザーは操作可能。

素晴らしい！ストリーミングを活用。

バグの修正

現在発生している問題は、loading.tsx ファイルで利用しているローダーが dashboard フォルダ内のすべてのページに適用されている点。

各アプリページごとに特定の UI 要素が必要な場合はどうするか？

このバグを解決するには、ルートグループを実装。(overview) ディレクトリ内に dashboard フォルダを作成し、loading.tsx と page.tsx ファイルをそこに移動。

これにより、loading.tsx ファイルはダッシュボードページのみに適用され、問題が解決。

ルートグループは、ウェブアドレスを変更せずにファイルを整理するための機能。括弧 () を使ってフォルダを作成すると、フォルダ名はウェブアドレスに含まれません。例えば、/dashboard/(overview)/page.tsx は /dashboard となります。