Next.js App Routerに関してメモ

• 従来はクライアントでのデータフェッチ（SWR、TanstackQuery、React Router、GraphQL、tRPC）が主流。

• Reactの推奨：https://ja.react.dev/reference/react/useEffect#what-are-good-alternatives-to-data-fetching-in-effects は3rdPartyライブラリの使用。

• しかしバンドルサイズも増える。

• データフェッチの通信回数とシンプルな設計はトレードオフ。

• そこで登場したRSC：https://ja.react.dev/reference/rsc/server-components

• App Routerでは、データフェッチはサーバーコンポーネントで行うのがベストプラクティス：https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server

  • バンドル前に事前にレンダリングされる。
  • 非同期関数をサポート、3rd Partyライブラリなしでデータフェッチ可能。

• RSCとGraphQLは相性が悪い。

  • RSCとGraphQLの協調ナレッジが少ない、実装コスト/バンドルサイズの増大。

• データフェッチは該当コンポーネントにコロケーション（適切な位置にコードを書くこと）すること。

  • App Routerでは末端のコンポーネントでデータフェッチをコロケーションするのが推奨。
  • Request Memoization：https://nextjs.org/docs/app/building-your-application/caching#request-memoization によってフェッチをメモ化出来るため、同じフェッチが複数回起きることはない。
  • 同一URL・同一オプションの指定が必要で、オプションが1つでも異なれば別リクエストが発生してしまう。
  • データフェッチ層は分離すること。
    • 念の為、server-onlyパッケージ：https://www.npmjs.com/package/server-only を利用するのも手。

• フェッチは並行化すると速度改善につながる。

  • データ間に依存関係がなく参照単位も異なる場合には、データフェッチを行うコンポーネント自体分割するのが良いらしい。