Sequential data fetching in NextJS - Mini Project: Build & Apply

Sequential Data Fetching in Next.js

📖 Scenario: You are building a simple Next.js app that fetches user data and then fetches posts for that user. This simulates a real-world case where you need to get data step-by-step from different sources.

🎯 Goal: Create a Next.js component that fetches user data first, then uses that data to fetch posts for that user sequentially. Display the user's name and their posts.

📋 What You'll Learn

Create a React functional component called UserPosts

Fetch user data from https://jsonplaceholder.typicode.com/users/1

Store the user data in a state variable called user

Fetch posts for the user from https://jsonplaceholder.typicode.com/posts?userId=1

Store the posts in a state variable called posts

Display the user's name and a list of their post titles

Use useEffect to perform the sequential data fetching

Handle loading states with a loading state variable

💡 Why This Matters

🌍 Real World

Sequential data fetching is common when you need to get data step-by-step, such as fetching user info first, then fetching related data like posts or comments.

💼 Career

Understanding how to fetch data sequentially and manage loading states is essential for building responsive and user-friendly web applications in Next.js and React.

1

Setup the UserPosts component and user state

Create a React functional component called UserPosts. Inside it, create a state variable called user initialized to null. Also create a loading state variable initialized to true.

NextJS

import React, { useState, useEffect } from 'react';

function UserPosts() {
  // Your code here
}

Hint

Use useState to create user and loading state variables inside the UserPosts component.

2

Add posts state variable

Inside the UserPosts component, add a state variable called posts initialized to an empty array [].

NextJS

import React, { useState, useEffect } from 'react';

function UserPosts() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  // Your code here

  return null;
}

Hint

Add a posts state variable using useState initialized to an empty array.

3

Fetch user data and then posts sequentially

Inside useEffect, fetch user data from https://jsonplaceholder.typicode.com/users/1. After receiving the user data, set it to user. Then fetch posts for that user from https://jsonplaceholder.typicode.com/posts?userId=1 and set them to posts. Finally, set loading to false. Use async/await inside useEffect.

NextJS

import React, { useState, useEffect } from 'react';

function UserPosts() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Your code here
  }, []);

  return null;
}

Hint

Use an async function inside useEffect to fetch user data first, then posts, updating state variables accordingly.

4

Render user name and post titles with loading state

In the UserPosts component, render a <div>. If loading is true, show Loading.... Otherwise, show the user's name inside an <h1> and a list of post titles inside <li> elements within a <ul>.

NextJS

import React, { useState, useEffect } from 'react';

function UserPosts() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const userRes = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const userData = await userRes.json();
      setUser(userData);

      const postsRes = await fetch('https://jsonplaceholder.typicode.com/posts?userId=1');
      const postsData = await postsRes.json();
      setPosts(postsData);

      setLoading(false);
    }
    fetchData();
  }, []);

  // Your code here
}

Hint

Use conditional rendering to show loading text or the user name and posts list.

Practice

1. What is the main reason to use sequential data fetching in Next.js?

easy

A. Because later data depends on the results of earlier data

B. To fetch all data at the same time for speed

C. To avoid using async/await syntax

D. To fetch data only once when the app starts

Solution

1. Step 1: Understand the dependency in data fetching

   Sequential fetching is used when one piece of data needs the result of a previous fetch to continue.

2. Step 2: Compare with other fetching methods

   Parallel fetching gets all data at once, but sequential waits for each step because of dependency.

3. Final Answer:

   Because later data depends on the results of earlier data -> Option A

4. Quick Check:

   Sequential fetching = dependent data steps [OK]

Hint: Use sequential fetching when data depends on previous results [OK]

Common Mistakes:

• Thinking parallel fetching is always better
• Ignoring data dependencies
• Confusing async/await with parallel fetching

2. Which of the following is the correct syntax to fetch data sequentially using async/await in Next.js?

easy

A. const data1 = fetch(url1); const data2 = fetch(url2);

B. const data1 = await fetch(url1), const data2 = await fetch(url2);

C. const data1 = fetch(url1).then(); const data2 = fetch(url2).then();

D. const data1 = await fetch(url1); const data2 = await fetch(url2);

Solution

1. Step 1: Identify correct async/await usage

   Using await before fetch pauses execution until the promise resolves, ensuring sequential order.

2. Step 2: Check syntax correctness

   const data1 = await fetch(url1); const data2 = await fetch(url2); uses two separate await statements correctly. const data1 = await fetch(url1), const data2 = await fetch(url2); has a syntax error with comma instead of semicolon.

3. Final Answer:

   const data1 = await fetch(url1); const data2 = await fetch(url2); -> Option D

4. Quick Check:

   Separate awaits with semicolons = correct syntax [OK]

Hint: Use separate await statements with semicolons for sequential fetch [OK]

Common Mistakes:

• Using commas instead of semicolons between await calls
• Not using await causing parallel fetch
• Using then() without await for sequential logic

3. What will be the output of this Next.js code snippet?

async function fetchData() {
  const res1 = await fetch('https://api.example.com/user');
  const user = await res1.json();
  const res2 = await fetch(`https://api.example.com/posts?userId=${user.id}`);
  const posts = await res2.json();
  return posts.length;
}

medium

A. Always zero because fetch is asynchronous

B. An error because user.id is undefined

C. The number of posts for the fetched user

D. The total number of users

Solution

1. Step 1: Understand sequential fetch calls

   The first fetch gets user data, then uses user.id to fetch posts for that user.

2. Step 2: Analyze returned value

   The function returns posts.length, which is the count of posts for that user.

3. Final Answer:

   The number of posts for the fetched user -> Option C

4. Quick Check:

   Sequential fetch returns posts count [OK]

Hint: Check if later fetch depends on earlier data for output [OK]

Common Mistakes:

• Assuming user.id is undefined without checking response
• Confusing posts length with total users
• Thinking async fetch returns zero immediately

4. Identify the error in this sequential data fetching code in Next.js:

async function getData() {
  const user = fetch('/api/user');
  const posts = await fetch(`/api/posts?userId=${user.id}`);
  return posts.json();
}

medium

A. Incorrect URL format in second fetch

B. Missing await before first fetch causing user to be a Promise

C. Missing await before posts.json()

D. Using template literals incorrectly

Solution

1. Step 1: Check fetch usage for user

   fetch returns a Promise; without await, user is a Promise, not the data object.

2. Step 2: Understand impact on user.id

   Accessing user.id fails because user is not resolved yet, causing runtime error.

3. Final Answer:

   Missing await before first fetch causing user to be a Promise -> Option B

4. Quick Check:

   Always await fetch to get resolved data [OK]

Hint: Always await fetch before accessing response data [OK]

Common Mistakes:

• Forgetting await before fetch
• Assuming fetch returns data directly
• Not awaiting json() call

5. You want to fetch user info, then fetch their orders, and finally fetch details for each order sequentially in Next.js. Which approach correctly handles this?

hard

A. Use async/await to fetch user, then orders, then loop with await inside for-of to fetch each order detail

B. Fetch user and orders in parallel, then fetch order details in parallel with Promise.all

C. Fetch user, then orders, then map order details fetches without await inside map

D. Fetch all data at once without waiting for previous fetches

Solution

1. Step 1: Understand sequential dependency

   Order details depend on orders, which depend on user info, so fetches must be sequential.

2. Step 2: Use for-of with await for sequential order detail fetch

   Using for-of with await inside ensures each order detail fetch waits for the previous to finish.

3. Final Answer:

   Use async/await to fetch user, then orders, then loop with await inside for-of to fetch each order detail -> Option A

4. Quick Check:

   Sequential fetch with for-of and await = correct approach [OK]

Hint: Use for-of with await for sequential loops in async functions [OK]

Common Mistakes:

• Using map without await causing parallel fetch
• Fetching all data at once ignoring dependencies
• Mixing parallel and sequential fetch incorrectly