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

Parallel data fetching

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

🎯 Goal: Create a Next.js page component that fetches user data and posts data in parallel using Promise.all inside getServerSideProps. Then display the user's name and a list of their post titles.

📋 What You'll Learn

Use getServerSideProps to fetch data on the server side

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

Fetch posts data from https://jsonplaceholder.typicode.com/posts?userId=1

Fetch both endpoints in parallel using Promise.all

Render the user's name in an <h1> tag

Render the post titles in an unordered list <ul> with each title in a <li>

Use functional React component syntax

💡 Why This Matters

🌍 Real World

Fetching multiple API endpoints in parallel is common in real apps to improve performance and user experience by loading data faster.

💼 Career

Understanding parallel data fetching and server-side rendering is essential for building efficient Next.js applications used in professional web development.

1

Setup basic Next.js page and fetch user data

Create a Next.js page component called UserPage. Inside getServerSideProps, fetch user data from https://jsonplaceholder.typicode.com/users/1 using fetch. Return the user data as a prop named user. Render the user's name inside an <h1> tag in the component.

NextJS

export default function UserPage({ user }) {
  return (
    
      {/* Render user name here */}
    
  )
}

export async function getServerSideProps() {
  // Fetch user data here
  
  // Your code here
}

Need a hint?

Use await fetch(url) and then await res.json() to get the user data.

2

Add posts data fetching setup

Inside getServerSideProps, add a fetch call to get posts data from https://jsonplaceholder.typicode.com/posts?userId=1. Store the result in a variable called posts after converting to JSON. Return posts as a prop alongside user. In the component, prepare to render posts but do not add the list yet.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      {/* Prepare to render posts here */}
    
  )
}

export async function getServerSideProps() {
  const resUser = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await resUser.json();
  // Fetch posts data here
  
  // Your code here
  return { props: { user, posts } };
}

Need a hint?

Use await fetch again for posts and convert to JSON.

3

Fetch user and posts data in parallel

Modify getServerSideProps to fetch user and posts data in parallel using Promise.all. Use Promise.all with an array of two fetch calls. Await both responses, then convert each to JSON. Assign the results to user and posts variables respectively. Return both as props.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      {/* Posts will be rendered here later */}
    
  )
}

export async function getServerSideProps() {
  // Fetch user and posts in parallel
  
  // Your code here
  return { props: { user, posts } };
}

Need a hint?

Use const [resUser, resPosts] = await Promise.all([...]) to fetch both URLs at once.

4

Render the list of post titles

In the UserPage component, below the user's name, render an unordered list <ul>. Inside it, use posts.map to create a list item <li> for each post's title. Make sure each <li> has a unique key using the post's id.

NextJS

export default function UserPage({ user, posts }) {
  return (
    
      {user.name}
      
        {/* Render post titles here */}
      
    
  )
}

export async function getServerSideProps() {
  const [resUser, resPosts] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1'),
    fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
  ]);
  const user = await resUser.json();
  const posts = await resPosts.json();
  return { props: { user, posts } };
}

Need a hint?

Use posts.map(post => <li key={post.id}>{post.title}</li>) inside the <ul>.