けけずん積読消化記録はじめに
実務でApp Routerを使って入るものの、適切に使えているのか不安だったので本書を購入。章ごとに気になった箇所をメモする。
2章
2.1
- P.25 何も宣言しなければ、デフォルトで全てのコンポーネントがServer Componentとして扱われる
- P.25 Client Componentはブラウザ／サーバー両方で実行される
2.5
- P.42 ビルド時にルート一覧が表示され、◯アイコンは静的レンダリングルート、λアイコンは動的レンダリングルートを表す
- P.43 Next.jsは基本的にすべてのRouteを静的レンダリングする
- P.43 Routeの実装に以下が含まれていると動的Routeになる
- 動的データの取得
- 動的関数（`cookes()`, `headers()`, `searchParams`の参照など）の使用
- ダイナミックセグメントの使用
3章
3.2
- P.56 Segment構成フォルダ
- Catch-all Segmentは、ネストされたパスに対応し、配列としてパラメータを参照できる
- Optional Catch-all Segmentは、Catch-allと同様のパスに加え、パスを指定していない場合のリクエストにも応じる
- P.60 Private Folderは、フォルダの頭にアンダースコアをつけることでそのフォルダに含まれるすべてのファイルをルーティング対象外にする
6章
6.3
- P.120 Requestのメモ化 = 同じfetch関数のリクエストが、自動でひとつのfetch関数リクエストにまとめられる
6.6
- P.135 reactパッケージのcache関数を使用することでfetch関数以外のRequestのメモ化ができる
7章
7.3
- P.166 オリジナルのgetServerSessionをラップした関数を用意しておけば、毎回authOptionsをimportせずに済む
8章
8.2
- P.187 Intercepting Routeは
(.)で始まり、Parallel Routeは@で始まる - P.188 Parallel RouteはLayoutにSlotされる
- Parallel Routeが存在しない場合にフォールバックされるdefault.tsxは必須
- P.191 モーダル画面であるにも関わらず、処理をサーバで完結できるのが特徴的
9章 データ更新とUI
9.1
- P.216 Server Action
- Formからサーバの非同期関数を直接呼び出せる機能
- API Clientが不要で、ハイドレーション完了前に実行できる
- P.217 “:use server”ディレクティブ
- 非同期関数の行頭、またはファイルの行頭で “use server” を宣言することでServer Actionとして使用できる
- P.217 Server Actionな関数の引数
- form要素から送信された値はFormData型として、引数として受け取れる
- form要素のactionにServer Actionな関数を渡す前に、FormData以外の引数をbindすることもできる
- P.219 ハイドレーション = 表示されたHTMLをインタラクティブにする処理のこと
- P.219 Progressive Enhancement = JavaScriptを使用しない状態でも、form要素の本質的な機能を損なわないようにする実装方針のこと
9.2
- P.223 On-demand Revalidation
- キャッシュを無効化するプロセスのこと
- 任意のタイミングでキャッシュを無効化できる。無効化したキャッシュは即座にキャッシュが再作成されるわけではない
- revalidatePathは特定のRouteのパスで、revalidateTagは特定のタグ文字列でキャッシュを無効化する
- P.225 通常はServer ActionでOn-demand Revalidationを使用し、CMSなど外部サービスのWebhookからOn-demand Revalidationする場合ははRoute Handlerを使用する
9.3
- P.229 react-domのuseFormStatus hookでform要素のステータスを取得できる
- 送信時のpendingかどうかなどの値を参照できる
- form要素の子コンポーネントで使用できる
- P.232 react-domのuseFormState hookでform要素の状態を保持できる
9.6
- P.249 Optimistic Update（楽観的更新） = Web APIリクエストが成功する前提で、先んじてUIを更新する手法のこと
- P.250 useOptimistic hookで「楽観的更新が施された状態」と「実体の状態」を、Formの送信状態で自動で切り替えることができる
9.7
- P.256 Progressive Enhancementに対応できるよう、formのバリデーションはclient/serverどちらでも行うようにすると良さそう
10章
10.1
- P.277 App Routerではコンポーネントの構造がデータ取得順に影響する
- P.279 コロケーション = コンポーネントが必要とするデータをそのコンポーネント自身で取得すること
- P.279 fecth関数
- デフォルトだと取得したデータはDataキャッシュとなる
- getServerSessionなどの動的関数が使用されていると動的データ取得として扱われ、Dataキャッシュは作成されない