実例で学ぶNext.js App Routerのベストプラクティス
Next.js App Router(ver13~15)の現在の状況とそのベストプラクティスを解説します。RSCの導入から複雑になったNext.jsを完結に分かりやすくお伝えします。キャッシュやレンダリング等の分かりにくい概念もドキュメントと図解を併用して理解できます。
本講座で学べる事
今回の配布資料と参考文献
ルーティングと階層構造の基本
AppRouterのルーティングとファイル規約
コンポーネント階層
コロケーション機能
プロジェクト整理機能
ルーティング設計のベストプラクティス
Atomic Design
Bulletproof-React
Parallel RoutesとIntercepting Routesについて
コンポーネントとクラサバの関係
ClientComponent
ServerComponent
注意点:Client Boundary
Compositionパターンの実装方法を見てみよう
ベストプラクティス
Next.jsの拡張されたfetch()
実例で学ぶfetchの取り扱い
ORM等を利用した関数の利用
useSWR/useQuery等のサードパーティライブラリ
並行データフェッチング
ストリーミングデータフェッチング
ダッシュボードアプリの場合のストリーミング表示
ベストプラクティス
Container / Presentationパターン
【補足】Container / Presentationパターンの実装例
キャッシュってなに?
Request Memoization
fetch以外ではcache関数を利用してメモ化
Requestのメモ化の仕組み
Data Cache
時間ベース再検証のキャッシュワークフロー(stale-while-revalidate)
オンデマンド再検証のキャッシュワークフロー
Data Cacheのキャッシュ期間とオプトアウト
Full Route Cache
Full Route Cacheの仕組み
クライアント側でのRouter Cacheと後続ナビゲーション
Router Cache
Router Cacheのキャッシュ期間とオプトアウト
ベストプラクティス
レンダリングってなに?
Static Rendering
Dyanamic Rendering
Streaming / Partial Pre Rendering(PPR)
ベストプラクティス