Parallel data loading in Remix - Step-by-Step Execution

Concept Flow - Parallel data loading

Start Request

↓

Trigger Loader Functions

↓

Loaders Run in Parallel

↓

Wait for All Loaders to Resolve

↓

Combine Data

↓

Render Component with Data

↓

End

When a Remix route loads, multiple loader functions run at the same time, fetching data in parallel before rendering.

Execution Sample

Remix

export async function loader() {
  const userPromise = fetch('/api/user');
  const postsPromise = fetch('/api/posts');
  const [userResponse, postsResponse] = await Promise.all([userPromise, postsPromise]);
  const user = await userResponse.json();
  const posts = await postsResponse.json();
  return { user, posts };
}

This loader fetches user and posts data at the same time, then waits for both to finish before returning.

Execution Table

Step	Action	Evaluation	Result
1	Start loader function	No data fetched yet	userPromise and postsPromise created (pending)
2	Trigger fetch('/api/user')	Request sent to user API	userPromise pending
3	Trigger fetch('/api/posts')	Request sent to posts API	postsPromise pending
4	Await Promise.all([userPromise, postsPromise])	Wait for both fetches to complete	Both promises resolved
5	Parse user JSON	userPromise resolved	user data object
6	Parse posts JSON	postsPromise resolved	posts data array
7	Return combined data	user and posts ready	{ user: userData, posts: postsData }
8	Render component with data	Data available	UI shows user and posts
9	End loader	All done	Loader completes

💡 Both fetch requests complete and data is combined before rendering.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
userPromise	undefined	Promise pending	Promise pending	Promise resolved	Promise resolved	Promise resolved	user data object
postsPromise	undefined	undefined	Promise pending	Promise resolved	Promise resolved	Promise resolved	posts data array
user	undefined	undefined	undefined	undefined	user data object	user data object	user data object
posts	undefined	undefined	undefined	undefined	undefined	posts data array	posts data array

Key Moments - 3 Insights

Why do both fetch calls start before awaiting?

Starting both fetches before awaiting lets them run at the same time, making loading faster. See steps 2 and 3 in the execution_table where both promises are created before awaiting Promise.all.

What happens if one fetch fails?

Promise.all rejects immediately if any fetch fails, so the loader stops and shows an error. This is why waiting for all promises together is important (step 4).

Why do we await user.json() and posts.json() separately after Promise.all?

Promise.all waits for the fetch responses, but the body parsing (json()) is another async step. We await them separately to get the actual data objects (steps 5 and 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of userPromise after step 3?

A Undefined

B Promise resolved

C Promise pending

D Rejected

💡 Hint

Check the 'userPromise' row in variable_tracker after step 3.

At which step does the loader wait for both fetches to complete?

A Step 2

B Step 4

C Step 6

D Step 8

💡 Hint

Look for the step where Promise.all is awaited in the execution_table.

If we awaited each fetch immediately instead of using Promise.all, what would change?

A Fetches would run sequentially, slowing loading

B Fetches would fail

C Fetches would run in parallel

D No change in behavior

💡 Hint

Consider the timing of fetch calls in steps 2 and 3 and how Promise.all affects concurrency.

Concept Snapshot

Parallel data loading in Remix:
- Start multiple fetches without awaiting immediately
- Use Promise.all to wait for all to finish
- Parse each response after Promise.all
- Returns combined data for rendering
- Speeds up loading by running requests at the same time

Full Transcript

In Remix, parallel data loading means starting multiple data fetches at once inside a loader function. Instead of waiting for one fetch to finish before starting the next, both fetches start immediately. Then, Promise.all waits for all fetches to complete together. After that, each response is parsed to JSON. Finally, the combined data is returned for the component to render. This approach makes loading faster because requests happen at the same time, not one after another.

Practice

1. What is the main benefit of using parallel data loading in Remix loaders?

easy

A. It caches data permanently on the server to avoid fetching.

B. It makes the page load data sequentially for better control.

C. It delays data fetching until the user interacts with the page.

D. It fetches multiple data sources at the same time, reducing wait time.

Solution

1. Step 1: Understand parallel data loading concept

   Parallel loading means fetching multiple data sources simultaneously instead of one after another.

2. Step 2: Identify the benefit in Remix loaders

   Using parallel loading reduces the total wait time for data, improving page speed and user experience.

3. Final Answer:

   It fetches multiple data sources at the same time, reducing wait time. -> Option D

4. Quick Check:

   Parallel loading = faster data fetch [OK]

Hint: Parallel means fetching all data at once, not one by one [OK]

Common Mistakes:

• Thinking parallel means sequential fetching
• Confusing caching with parallel loading
• Assuming data loads only after user action

2. Which of the following is the correct way to run two async data fetches in parallel inside a Remix loader?

easy

A. const data1 = await fetchData1(); const data2 = await fetchData2();

B. const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);

C. const data1 = fetchData1(); const data2 = fetchData2();

D. const data1 = fetchData1().then(); const data2 = fetchData2().then();

Solution

1. Step 1: Identify how to run async calls in parallel

   Using Promise.all with an array of promises runs them together and waits for all to finish.

2. Step 2: Match syntax to Remix loader pattern

   const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]); correctly uses await Promise.all with fetchData1() and fetchData2() inside an array.

3. Final Answer:

   const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]); -> Option B

4. Quick Check:

   Promise.all runs promises in parallel [OK]

Hint: Use Promise.all with await to fetch data together [OK]

Common Mistakes:

• Awaiting each fetch separately causing sequential fetch
• Not awaiting promises causing unresolved data
• Using .then() without handling promises properly

3. Given this Remix loader code, what will be the value of data?

export async function loader() {
  const userPromise = fetch('/api/user').then(res => res.json());
  const postsPromise = fetch('/api/posts').then(res => res.json());
  const [user, posts] = await Promise.all([userPromise, postsPromise]);
  return { user, posts };
}

medium

A. An object with user data only, posts will be undefined.

B. An error because fetch calls are not awaited individually.

C. An object with user and posts data fetched in parallel.

D. An object with posts data only, user will be undefined.

Solution

1. Step 1: Analyze the promises created

   Two fetch calls create promises for user and posts data, both returning JSON.

2. Step 2: Understand Promise.all usage

   Promise.all waits for both promises to resolve, then destructures results into user and posts variables.

3. Final Answer:

   An object with user and posts data fetched in parallel. -> Option C

4. Quick Check:

   Promise.all returns all resolved data [OK]

Hint: Promise.all returns array of all resolved promise results [OK]

Common Mistakes:

• Assuming only one fetch resolves
• Thinking fetch must be awaited separately
• Confusing Promise.all with sequential awaits

4. What is wrong with this Remix loader code that tries to load data in parallel?

export async function loader() {
  const user = await fetch('/api/user').then(res => res.json());
  const posts = await fetch('/api/posts').then(res => res.json());
  return { user, posts };
}

medium

A. It fetches user and posts sequentially, not in parallel.

B. It uses .then() incorrectly causing syntax error.

C. It does not return a valid object from loader.

D. It fetches posts before user causing race condition.

Solution

1. Step 1: Examine the await usage

   Each fetch is awaited before the next starts, causing sequential fetching.

2. Step 2: Identify parallel loading mistake

   To load in parallel, both fetches should start before awaiting, e.g., using Promise.all.

3. Final Answer:

   It fetches user and posts sequentially, not in parallel. -> Option A

4. Quick Check:

   Separate awaits cause sequential fetch [OK]

Hint: Await all promises together to fetch in parallel [OK]

Common Mistakes:

• Awaiting each fetch separately
• Not using Promise.all for parallelism
• Assuming .then() alone makes it parallel

5. You want to load user info, posts, and comments in parallel in a Remix loader. Which code correctly fetches all three and returns them together?

hard

A. const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]); return { user, posts, comments };

B. const user = await fetchUser(); const posts = await fetchPosts(); const comments = await fetchComments(); return { user, posts, comments };

C. const data = await Promise.all(fetchUser(), fetchPosts(), fetchComments()); return data;

D. const user = fetchUser(); const posts = fetchPosts(); const comments = fetchComments(); return { user, posts, comments };

Solution

1. Step 1: Check how to run multiple async calls in parallel

   Promise.all accepts an array of promises and returns an array of results after all resolve.

2. Step 2: Validate correct syntax and return structure

   const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]); return { user, posts, comments }; correctly awaits Promise.all with an array of fetch calls and destructures results into variables, then returns an object.

3. Final Answer:

   const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]); return { user, posts, comments }; -> Option A

4. Quick Check:

   Use Promise.all with array of fetches for parallel loading [OK]

Hint: Use Promise.all with array of fetch calls and destructure [OK]

Common Mistakes:

• Awaiting fetches one by one causing slow load
• Passing promises as separate arguments to Promise.all
• Returning unresolved promises instead of awaited data