53ningen.com53ningen.com
Loading...

Data Fetching Patterns and Best Practices

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

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

可能な限り Server Component によるサーバー上でのデータ取得が推奨されており、これにより以下ことが実現できる
  • （API などを介さず）データベースなどのリソースに直接アクセスできる
  • アクセストークンや API キーなどの機密情報をクライアント側にさらさずにすみ、よりセキュアな状態にできる
  • データ取得とレンダリングを同じ環境で行うことにより、クライアント-サーバー間通信とクライアント上での処理を低減できる
  • クライアント側からの複数の個別のリクエストをサーバー側における複数のデータ取得についての単一のリクエストにまとめることができる

  • クライアント-サーバー間の waterfalls を低減できる

  • リージョンによりデータフェッチ先をより近い場所にすることができ、結果として遅延が減少しパフォーマンスが向上する
  • Server Actions によりデータの操作や更新ができる
TODO:
  • waterfalls について補足を追加する
  • Server Actions についての補足を追加する

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

コンポーネントツリーの中で同じデータが必要なコンポーネントが複数ある場合に、データをグローバルに取得したり props により受け渡したりする手法があるが、そのようなことをする必要はない。
その代わりに fetch や React の cache を用いて必要な場所で必要なデータを取得してもパフォーマンス上問題が発生しないようになっている。これは fetch や cache によるメモ化の振る舞いによるものとなる。

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

Suspense を活用することにより、必要なデータが取得できてないローディング状態の UI をまずはじめにレンダリングし、取得後にデータが格納された UI を表示することができる。これによりユーザーはページ全体のロードを待たずに UI の操作が可能となる。
後述の sequential data fetching が生じるパターンに対して、ページについては loading.js、コンポーネントについては Suspense が有効なプラクティスとなる。
  • sequential data fetching: ある fetch が前の fetch の結果に依存しているパターン
  • parallel data fetching: 並列して fetch できるパターン

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

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