Route単位とComponent単位の分割
route単位（screen単位）と、screen内部（widget単位）で分割します。遅い部分の近くにSuspenseを置き、残りを操作可能に保ちます。
「Route単位とComponent単位の分割」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
2 つのレベル：ルートとウィジェット
目的：ルート（画面全体）とウィジェット（画面内の重い部分）を分割します。ページを使用できる状態に保つため、フォールバックを局所化します。
分割する場所と理由
- ルートベース：大きなページを分割します
- コンポーネント単位：チャートやエディターを分割します
- 遅い領域のすぐ近くに Suspense を配置します
デモ：ルート形式の分割
ルートベース：Reports タブだけを遅延読み込みし、他のタブはすぐにレンダーします。
<div id="root"></div>
デモ：ウィジェット単位の分割
コンポーネント単位：処理の重い Chart ウィジェットを遅延読み込みし、ページのシェルはすぐにレンダーします。
<div id="root"></div>
デモ：ホバー時の事前読み込み
意図に応じた Preload：ユーザーがボタンにホバーした時点で読み込みを開始するため、クリック時には即座に表示できます。
<div id="root"></div>
ヒントと注意点
- 巨大な境界は避け、局所的に保ちます
- フォールバックのサイズを最終的な UI に合わせます
- すべての小さなコンポーネントではなく、ユーザーフロー（ルート）と重いウィジェットに基づいて分割します
分割戦略の確認
まとめ
まとめ：大きな画面（ルート）と重いウィジェットを分割します。遅い領域ごとに独自の Suspense で囲み、小さなフォールバックを用意します。意図が示された時点で事前読み込みを行うと、クリックの応答が速くなります。
よくある質問
「Route単位とComponent単位の分割」レッスンは無料ですか？
はい。「Route単位とComponent単位の分割」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Route単位とComponent単位の分割」で何を学びますか？
route単位（screen単位）と、screen内部（widget単位）で分割します。遅い部分の近くにSuspenseを置き、残りを操作可能に保ちます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Route単位とComponent単位の分割」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- React.lazyとSuspense――Lazy Component
- Route単位とComponent単位の分割
- Bundle、CacheとPreloadingのヒント