0Pricing
React Academy · レッスン

Nested Layout、Loader（概念）、Prefetching

nested layout UIを作り、route loaderを概念的に理解し、小さなlink prefetch hintでscreenの表示を速くします。

「Nested Layout、Loader（概念）、Prefetching」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。

レッスンの概要

目標：ネストしたレイアウト、route loader の概念、および軽量な prefetch による軽快なナビゲーションを理解します。

  • レイアウトと outlet
  • レンダー前にデータを準備
  • 次の画面を先読み

ネストしたレイアウトを使う理由

  • 永続するシェル：ヘッダーやサイドバー
  • ルートごとに outlet を入れ替えます
  • 再レンダーを減らし、UIを滑らかにします

デモ：ネストしたレイアウトのシェルと outlet

小さなデモです。永続するヘッダーと、内容が変化する outlet を持つレイアウトを作成します。

<div id="root"></div>

デモ：概念的な route loader

小さな loader でレンダー前のデータ取得をシミュレートし、その後 outlet にデータを表示します。

<div id="root"></div>

デモ：ホバー時の prefetch キャッシュ

ホバー時に次の画面のデータを prefetch し、ナビゲーション時にはウォームキャッシュを使って即座に描画します。

<div id="root"></div>

ヒントと注意点

  • シェルを永続させ、outlet だけを入れ替えます
  • 表示前にデータを読み込み、loading と error の状態を処理します
  • 意図が示された時点（ホバーやフォーカス）で prefetch し、使用されなければキャンセルします

ネストしたレイアウトの利点の確認

クライアント側ルーティングでネストしたレイアウトを使う主な利点は何ですか？

振り返り

振り返り：ネストしたレイアウトを使用してシェルを永続させ、概念的にはレンダー前にデータを読み込み、意図が示された時点で prefetch することで、画面を瞬時に表示されるように感じさせます。

よくある質問

「Nested Layout、Loader（概念）、Prefetching」レッスンは無料ですか？

はい。「Nested Layout、Loader（概念）、Prefetching」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。

「Nested Layout、Loader（概念）、Prefetching」で何を学びますか？

nested layout UIを作り、route loaderを概念的に理解し、小さなlink prefetch hintでscreenの表示を速くします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「Nested Layout、Loader（概念）、Prefetching」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Nested Layout、Loader（概念）、Prefetching
  2. Auth FlowとProtected Route
  3. Scroll RestorationとNot-Found Route
← React Academyに戻る