Summary  
This chapter explains how to group related components under a single wrapper and leverage React’s Suspense with a skeleton fallback to optimize asynchronous data fetching and avoid jarring visual loading effects.  

General domain of usage  
Web user interface development

`Card`コンポーネントについてですが、それぞれのカードにローダーを追加するべきか、またはこのコンポーネントをどのように扱うべきか。

個々の`<Card>`コンポーネントのデータを取得する際、各カードを個別に読み込むと*ポッピング効果*が発生し、カードが順次表示されることでユーザーにとって違和感のある視覚的変化が生じる可能性があります。

この問題を緩和するために、`page.tsx`ファイルで以下の手順を検討してください。

## プロジェクトに戻る
- `<Card>`コンポーネントの削除
- `fetchCardData()`関数の削除
- 新しいラッパーコンポーネント`<CardWrapper />`のインポート
- 新しいスケルトンコンポーネント`<CardsSkeleton />`のインポート
- `<CardWrapper />`を`Suspense`でラップ

- `app/ui/dashboard/cards.tsx` に移動;
- `fetchCardData()` をインポート;
- `fetchCardData()` コンポーネント内で `<CardWrapper/>` を呼び出し;
- 必要なコードのコメントアウトを解除。

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

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

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

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

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

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

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

コンポーネントのグループ化によるローダーの最適化

プロジェクトに戻る

実践例