From 22c841603ca0d6a1f3e9aa1bf35cdcbb8180b2d7 Mon Sep 17 00:00:00 2001 From: MD Rahil Date: Sat, 22 Aug 2026 14:03:48 -0700 Subject: [PATCH 1/2] docs: improve parallel and sequential data fetching explanat# --- .../parallel-vs-sequential@SjJQ7ceU6vBhlhrN | 18 +++++++ ...lel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md | 47 +++++++++++++++++-- 2 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN diff --git a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN new file mode 100644 index 000000000000..841f21b822c7 --- /dev/null +++ b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN @@ -0,0 +1,18 @@ +# Parallel and Sequential Data Fetching + +When multiple data requests are needed on a page, the way those requests are started can affect performance. + +## Parallel Data Fetching + +Parallel data fetching starts multiple requests at the same time when they are independent of each other. + +For example: + +```tsx +const artistPromise = getArtist(); +const albumsPromise = getAlbums(); + +const [artist, albums] = await Promise.all([ + artistPromise, + albumsPromise, +]); diff --git a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md index b5205555c7a5..c302d75c9d3c 100644 --- a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md +++ b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md @@ -1,11 +1,50 @@ # Parallel vs Sequential -When fetching data inside React components, you need to be aware of two data fetching patterns: Parallel and Sequential. +When fetching data inside React components, you need to be aware of two data fetching patterns: parallel and sequential. -With sequential data fetching, requests in a route are dependent on each other and therefore create waterfalls. There may be cases where you want this pattern because one fetch depends on the result of the other, or you want a condition to be satisfied before the next fetch to save resources. However, this behavior can also be unintentional and lead to longer loading times. +## Sequential Data Fetching -With parallel data fetching, requests in a route are eagerly initiated and will load data at the same time. This reduces client-server waterfalls and the total time it takes to load data. +With sequential data fetching, requests depend on each other and create a waterfall. + +For example: + +```tsx +const artist = await getArtist(); +const albums = await getAlbums(artist.id); +The second request cannot start until the first request has finished. This pattern is useful when the second request depends on the result of the first request. + +However, unnecessary sequential requests can increase the total loading time of a page. + +Parallel Data Fetching + +With parallel data fetching, independent requests can be started at the same time. + +For example: + +const artistPromise = getArtist(); +const albumsPromise = getAlbums(); + +const [artist, albums] = await Promise.all([ + artistPromise, + albumsPromise, +]); + +Because the requests run concurrently, this can reduce the time required to load independent data. + +Choosing Between Parallel and Sequential Fetching + +Use sequential fetching when there is a dependency between requests: + +Request A → Request B → Result + +Use parallel fetching when requests are independent: + +Request A ──┐ + ├──→ Result +Request B ──┘ + +Avoid creating sequential request waterfalls when the requests do not depend on each other. Visit the following resources to learn more: -- [@official@Parallel and sequential data fetching](https://nextjs.org/docs/14/app/building-your-application/data-fetching/patterns#parallel-and-sequential-data-fetching) \ No newline at end of file +@official@Parallel and sequential data fetching From e48c267c7cb367de61f335a45abea4ccb741b621 Mon Sep 17 00:00:00 2001 From: MD Rahil Date: Tue, 1 Sep 2026 10:34:57 -0700 Subject: [PATCH 2/2] docs: shorten parallel and sequential fetching description --- .../parallel-vs-sequential@SjJQ7ceU6vBhlhrN | 18 ------- ...lel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md | 47 +------------------ 2 files changed, 1 insertion(+), 64 deletions(-) delete mode 100644 roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN diff --git a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN deleted file mode 100644 index 841f21b822c7..000000000000 --- a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN +++ /dev/null @@ -1,18 +0,0 @@ -# Parallel and Sequential Data Fetching - -When multiple data requests are needed on a page, the way those requests are started can affect performance. - -## Parallel Data Fetching - -Parallel data fetching starts multiple requests at the same time when they are independent of each other. - -For example: - -```tsx -const artistPromise = getArtist(); -const albumsPromise = getAlbums(); - -const [artist, albums] = await Promise.all([ - artistPromise, - albumsPromise, -]); diff --git a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md index c302d75c9d3c..b4c1457f5c69 100644 --- a/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md +++ b/roadmaps/nextjs/content/parallel-vs-sequential@SjJQ7ceU6vBhlhrN8hcvy.md @@ -1,50 +1,5 @@ # Parallel vs Sequential -When fetching data inside React components, you need to be aware of two data fetching patterns: parallel and sequential. - -## Sequential Data Fetching - -With sequential data fetching, requests depend on each other and create a waterfall. - -For example: - -```tsx -const artist = await getArtist(); -const albums = await getAlbums(artist.id); -The second request cannot start until the first request has finished. This pattern is useful when the second request depends on the result of the first request. - -However, unnecessary sequential requests can increase the total loading time of a page. - -Parallel Data Fetching - -With parallel data fetching, independent requests can be started at the same time. - -For example: - -const artistPromise = getArtist(); -const albumsPromise = getAlbums(); - -const [artist, albums] = await Promise.all([ - artistPromise, - albumsPromise, -]); - -Because the requests run concurrently, this can reduce the time required to load independent data. - -Choosing Between Parallel and Sequential Fetching - -Use sequential fetching when there is a dependency between requests: - -Request A → Request B → Result - -Use parallel fetching when requests are independent: - -Request A ──┐ - ├──→ Result -Request B ──┘ - -Avoid creating sequential request waterfalls when the requests do not depend on each other. - -Visit the following resources to learn more: +When fetching data inside React components, you need to understand parallel and sequential data fetching. Parallel fetching starts independent requests at the same time, while sequential fetching runs requests one after another when later requests depend on earlier results. Choosing the appropriate pattern can reduce unnecessary waiting and improve application performance. @official@Parallel and sequential data fetching