React でのフェッチ ウォーターフォールの理解と防止

あなたが React 開発者であれば、フェッチ ウォーターフォール (リクエスト ウォーターフォールまたはネットワーク ウォーターフォールとも呼ばれます) に遭遇したことがあるはずです。苦労してデザインしたページの読み込みに時間がかかっている原因を確認しようとすると、分析ツールにその独特の形状が現れます。

このブログ投稿では、フェッチ ウォーターフォールとは何か、それが発生する理由、React アプリケーションにどのような影響を与えるか、そして最も重要なことに、それらを回避する方法について説明します。

フェッチ ウォーターフォールとは何ですか?

基本から始めましょう。

フェッチ ウォーターフォールは、複数の API 呼び出しまたはフェッチ リクエストが連鎖して次々に実行されるときに発生するパフォーマンスの問題です。複数のリクエストを並行して送信するのではなく (これにより、リクエストは同時に完了することができます)、リクエストはキューに入れられ、順番に実行されます。これにより、特にフェッチ数が増加した場合、ページのレンダリングに大幅な遅延が発生します。

これを簡単に視覚的に表現すると次のとおりです。

出典: Sentry.io

上の画像から、「ウォーターフォール」パターンの連続的な遅延がはっきりとわかります。各リクエストは、前のリクエストが完了した後にのみ開始されます。実際には、1 つのリクエストでわずかな遅延が発生しただけでも、ページ全体の読み込み時間が大幅に増加する可能性があります。

最近の Web ユーザーはアプリケーションの読み込みが速いことを期待しているため、これはユーザー エクスペリエンスにとって特に問題です。数秒の遅延は直帰率の上昇やエンゲージメントの低下につながり、アプリケーション全体の成功に影響を与える可能性があります。

フェッチウォーターフォールはなぜ起こるのでしょうか?

React でのフェッチ ウォーターフォールは通常、コンポーネントの階層構造が原因で発生します。典型的なシナリオは次のとおりです:

1. 親コンポーネントがデータを取得します: 親コンポーネントは、マウント時にフェッチ要求を開始します。
2. 子コンポーネントはデータを待機します: 子コンポーネントは親によってフェッチされたデータに依存し、親のデータが利用可能になった場合にのみレンダリングされます。
3. シーケンシャルリクエスト: 複数のネストされたコンポーネントがある場合、それぞれがフェッチリクエストを順番にトリガーし、「ウォーターフォール」効果を引き起こす可能性があります。

このカスケード動作は、React のコンポーネントが非同期的にレンダリングされるために発生します。親コンポーネントがデータをフェッチすると、子コンポーネントは親のリクエストが完了するまで待機する必要がある場合があります。これらの取得が効率的に処理されないと、各リクエストが前のリクエストに依存するため、大幅な遅延が発生する可能性があります。

フェッチ ウォーターフォールを特定する方法

React アプリケーションがフェッチ ウォーターフォールの影響を受けているかどうかを特定するには、Chrome DevTools や React DevTools などのツールを使用して、ネットワーク リクエストとパフォーマンスを監視できます。 Chrome DevTools で、ネットワーク タブに移動し、ページの読み込みプロセスをブロックしている連続 API 呼び出しを探します。

React DevTools では、コンポーネントの再レンダリングを検査し、フェッチ リクエストが複数回トリガーされる原因となっている不要な依存関係を特定できます。

フェッチ ウォーターフォールが発生している可能性がある兆候をいくつか示します。

• ページの読み込み時間が遅い: ページの読み込みに予想より時間がかかる場合。
• 不審なパフォーマンス パターン: 一連の API 呼び出しが並列ではなく次々に行われているように見える場合。

React でのフェッチ ウォーターフォールを防ぐ方法

幸いなことに、ウォーターフォールのフェッチを回避し、React アプリケーションを最適化してパフォーマンスを向上させるための戦略がいくつかあります。

1. 並列でデータをフェッチする

各 API リクエストが完了するのを待ってから次の API リクエストを開始するのではなく、複数のフェッチ リクエストを並行して実行することを検討してください。これは、JavaScript の Promise.all() メソッドを使用して実行でき、複数の Promise を同時に実行できます。

これは、データを並列フェッチする例です:

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

データを並行して取得することにより、合計待機時間が短縮され、ブラウザがリソースをより速く読み込めるようになります。

2. コンポーネントデータの取得を分離

コンポーネントをリファクタリングして、コンポーネントが独自のフェッチをトリガーするために親コンポーネントのデータに依存しないようにすることができます。代わりに、各子コンポーネントが独自のデータ取得を独立して処理できるようにします。これは、状態をリフトアップして必要なデータを渡すか、React Query や SWR などのライブラリを使用してコンポーネント レベルでのフェッチを管理することで実行できます。

3. React Query または SWR を使用する

React Query や SWR などの ライブラリは、React アプリケーションでのデータ取得の管理に最適です。これらは、キャッシュ、バックグラウンド データのフェッチ、およびエラー処理を処理すると同時に、効率的にデータを並行してフェッチできるようにします。

たとえば、React Query は、データ取得のためのキャッシュ、再試行、バックグラウンド同期を自動的に処理し、コンポーネントがデータを不必要に待機せず、必要な場合にのみネットワーク呼び出しが行われるようにします。

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

4. データをキャッシュして冗長なリクエストを削減します

キャッシュにより、サーバーへの冗長なリクエストの必要性が大幅に軽減されます。フェッチしたデータをローカル (コンポーネントの状態、コンテキスト、または React Query などのキャッシュ ライブラリ) に保存することで、不要なネットワーク リクエストを回避し、アプリケーションをより高速かつ効率的にすることができます。

結論

React のフェッチ ウォーターフォールはパフォーマンスのボトルネックの主な原因となる可能性がありますが、適切な戦略を立てれば簡単に回避できます。データを並行して取得し、コンポーネントからのデータ取得を分離し、React Query などの強力なライブラリを活用することで、React アプリケーションのパフォーマンスを向上させ、ユーザー エクスペリエンスを向上させることができます。

React コードベースで頻繁なフェッチ ウォーターフォールに対処している場合は、一歩下がってデータ フェッチ パターンを分析し、これらのベスト プラクティスを実装する価値があります。最終的には、アプリケーションが API と対話する方法を最適化することで、より高速で信頼性が高く、スケーラブルなアプリケーションが実現されます。

以上がReact でのフェッチ ウォーターフォールの理解と防止の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。