Parallel data fetching pattern in NextJS - Mini Project: Build & Apply

Parallel Data Fetching Pattern in Next.js

📖 Scenario: You are building a Next.js app that shows user details and their posts side by side. To make the page load faster, you want to fetch user info and posts at the same time, not one after the other.

🎯 Goal: Build a Next.js server component that fetches user data and posts data in parallel using Promise.all and displays the user name and the titles of their posts.

📋 What You'll Learn

Create two async functions to fetch user data and posts data

Use a config variable for the user ID

Fetch both user and posts data in parallel using Promise.all

Render the user name and a list of post titles in the component

💡 Why This Matters

🌍 Real World

Fetching multiple data sources in parallel is common in web apps to improve performance and user experience.

💼 Career

Understanding parallel data fetching and server components is essential for building fast, scalable Next.js applications.

1

Create async functions to fetch user and posts data

Create two async functions called fetchUser and fetchPosts. fetchUser should fetch from https://jsonplaceholder.typicode.com/users/1. fetchPosts should fetch from https://jsonplaceholder.typicode.com/posts?userId=1. Both should return the JSON response.

NextJS

# Your code here

Need a hint?

Use async function syntax and await fetch(...) to get data, then call res.json() to parse it.

2

Add a config variable for user ID

Create a constant called userId and set it to 1. Update the URLs in fetchUser and fetchPosts to use this userId variable instead of the hardcoded number.

NextJS

async function fetchUser() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/1`);
  return res.json();
}

async function fetchPosts() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=1`);
  return res.json();
}

# Your code here

Need a hint?

Use a template string with backticks and ${userId} to insert the variable into the URL.

3

Fetch user and posts data in parallel

Create an async function called getData. Inside it, use Promise.all to run fetchUser() and fetchPosts() in parallel. Return an object with user and posts properties holding the results.

NextJS

const userId = 1;

async function fetchUser() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return res.json();
}

async function fetchPosts() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
  return res.json();
}

# Your code here

Need a hint?

Use array destructuring to get user and posts from the array returned by Promise.all.

4

Create the Next.js server component to render user and posts

Create an async React component called Page. Inside it, call getData() to get user and posts. Return JSX that renders the user's name inside an <h1> and a list of post title inside <li> elements within a <ul>.

NextJS

const userId = 1;

async function fetchUser() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return res.json();
}

async function fetchPosts() {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
  return res.json();
}

async function getData() {
  const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  return { user, posts };
}

# Your code here

Need a hint?

Remember to use await when calling getData() inside the async component. Use map to render the list of posts.