あなたが React 開発者であれば、フェッチ ウォーターフォール (リクエスト ウォーターフォールまたはネットワーク ウォーターフォールとも呼ばれます) に遭遇したことがあるはずです?？鄤氦筏匹钎顶ぅ螭筏骏讴`ジの読み込みに時(shí)間がかかっている原因を確認(rèn)しようとすると、分析ツールにその獨(dú)特の形狀が現(xiàn)れます。

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

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

基本から始めましょう。

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

これを簡(jiǎn)単に視覚的に表現(xiàn)すると次のとおりです。

出典: Sentry.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
};

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

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

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

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

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

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

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. データをキャッシュして冗長(zhǎng)なリクエストを削減します

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

結(jié)論

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

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

以上がReact でのフェッチ ウォーターフォールの理解と防止の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。