Next.js: Data Fetching Patterns and Best Practices

Data Fetching: Data Fetching Patterns and Best Practices | Next.js の内容について自分向けに情報を要約したり、周辺の知識をメモしておくページ

サーバー上でのデータ取得

可能な限り Server Component によるサーバー上でのデータ取得が推奨されており、これにより以下ことが実現できる

TODO:

ベストプラクティス: 必要な場所で必要なデータを取得する

コンポーネントツリーの中で同じデータが必要なコンポーネントが複数ある場合に、データをグローバルに取得したり props により受け渡したりする手法があるが、そのようなことをする必要はない。

その代わりに fetch や React の cache を用いて必要な場所で必要なデータを取得してもパフォーマンス上問題が発生しないようになっている。これは fetch や cache によるメモ化の振る舞いによるものとなる。

ベストプラクティス: loading.js と Suspense の活用

Suspense を活用することにより、必要なデータが取得できてないローディング状態の UI をまずはじめにレンダリングし、取得後にデータが格納された UI を表示することができる。これによりユーザーはページ全体のロードを待たずに UI の操作が可能となる。

後述の sequential data fetching が生じるパターンに対して、ページについては loading.js、コンポーネントについては Suspense が有効なプラクティスとなる。

ベストプラクティス: データを preload する

waterfalls を防ぐ他の方法として preload がある