Summary  
This chapter explains how to implement specific part loaders by using React Suspense to delay component rendering until their own data fetching completes and by providing fallback skeleton components during loading.  

General domain of usage  
Frontend web applications

これまでは、ページ全体をストリーミングしていました。しかし、Reactの`Suspense`を使うことで、特定のコンポーネントのみを詳細にストリーミングすることができます。

`Suspense`は、データの読み込みなど特定の条件が満たされるまで、アプリの一部の表示を遅延させることができます。動的なコンポーネントを`Suspense`でラップし、動的部分の読み込み中に表示する一時的なコンポーネントを指定します。これを実現するには、データ取得処理をコンポーネント内に移動します。

## プロジェクトに戻る
`fetchIncome()`から`app/dashboard/(overview)/page.tsx`およびそのデータを削除します。

Reactから`<Suspense>`をインポートし、`<IncomeChart/>`をその中でラップします。フォールバックコンポーネントとして`<IncomeChartSkeleton>`を渡すことができます。

最後に、`<IncomeChart>`コンポーネントを自身でデータを取得するように更新し、渡していたプロップを削除します。

ライブページをリフレッシュすると、データの読み込み中にチャートの位置にスケルトンローダーが表示されることが確認できます。

## 実践例
重要: 動画で示されているように、`layout.tsx` ファイルを `(overview)` フォルダに移動する必要はありません。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

特定部分ローダーの実装

プロジェクトに戻る

実践例