Next.js Discord

Discord Forum

A doubt about parallel data fetching

Answered
Yakutian Laika posted this in #help-forum
Open in Discord
Avatar
Yakutian LaikaOP
I've just read about this concept in the [docs](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#parallel-data-fetching) and I'm interested in implementing this.

The thing is that I already have two separate functions that make a fetch call (different endpoints) that returns the data I need for 2 separate components, both in the same page.

If I want to use parallel data fetching do I need to change both fetch calls to return res.json() instead of the data?

A second question, is it possible to verify that the calls are parallelized?
Answered by Julienng
Hi!

The documentation there explains how JavaScript works:

sequential fetch:

async function sequentialFetch() {
  const data1 = await fetch(".../a/1").then(res => res.json());
  const data2 = await fetch(".../b/1").then(res => res.json());

  return {data1, data2};
}


To change that to a parallel fetch, you do:

async function parallelFetch() {
  const data1Promise = fetch(".../a/1").then(res => res.json());
  const data2Promise = fetch(".../b/1").then(res => res.json());

  const [data1, data2] = await Promise.all([data1Promise, data2Promise]);

  return {data1, data2};
}


Why this works ?

await is saying to JS: you can pause while this promise is pending

So:
// sequential, because we await the response from fetchUser() before calling fetchPosts()
await fetchUser();
await fetchPosts();

// parallel, we don't wait, we just call the fetch without waiting
const userPromise = fetchUser()
const postsPromise = fetchPosts()

// now I need both to be fulfilled, so I await
await Promise.all([userPromise, postsPromise]);
View full answer

8 Replies

Avatar
Yakutian LaikaOP
up?
Avatar
Julienng
Hi!

The documentation there explains how JavaScript works:

sequential fetch:

async function sequentialFetch() {
  const data1 = await fetch(".../a/1").then(res => res.json());
  const data2 = await fetch(".../b/1").then(res => res.json());

  return {data1, data2};
}


To change that to a parallel fetch, you do:

async function parallelFetch() {
  const data1Promise = fetch(".../a/1").then(res => res.json());
  const data2Promise = fetch(".../b/1").then(res => res.json());

  const [data1, data2] = await Promise.all([data1Promise, data2Promise]);

  return {data1, data2};
}


Why this works ?

await is saying to JS: you can pause while this promise is pending

So:
// sequential, because we await the response from fetchUser() before calling fetchPosts()
await fetchUser();
await fetchPosts();

// parallel, we don't wait, we just call the fetch without waiting
const userPromise = fetchUser()
const postsPromise = fetchPosts()

// now I need both to be fulfilled, so I await
await Promise.all([userPromise, postsPromise]);
Answer
Avatar
Yakutian LaikaOP
sure, but what about having functions that already return the data?

async function getUser() {
  const response = await fetch('')
  const data = await response.json()

  return data
}


my question goes this way, I already have two functions that return the result of response.json(). I don't use await on getUser() will it work for parallel data fetching?

and what about to check the parallel fetch worked?
Avatar
Julienng
In your example, getUser() returns a promise of data, it works the same way as any other promise
if you want to test quickly:

function sleep(ms) {
  if (ms === 0) return Promise.resolve();
  return new Promise(r => setTimeout(r, ms));
}

async function sequential() {
  console.time("sequential")
  await sleep(1000);
  await sleep(2000);
  console.timeEnd("sequential");
}

async function parallel() {
  console.time("parallel")
  const sleep1 = sleep(1000);
  const sleep2 = sleep(2000);

  await Promise.all([sleep1, sleep2]);
  console.timeEnd("parallel");
}

async function test() {
  await Promise.all([sequential(), parallel()]);
}
for me in my browser:
Image
Avatar
Yakutian LaikaOP
okay, I thought it was only before returning the JSON data.

I tried to run in dev mode with node inspect to get data from the node execution process but it didn't work.

Running NODE_OPTIONS='--inspect' next dev and profiling the page while reloading the page gives empty results... I'd like to know if it's possible to inspect the server side
Avatar
Yakutian LaikaOP
I've done some tests trying different approaches at using console.time() and console.timeEnd() I can see a big change in response.

At the home page
- sequential first load skipped cache: 4s
- sequential cache hit 17ms

- parallel first load skipped cache 1.2s
- parallel cache hit 6ms

amazing 😄