Fetch in server components in NextJS - Mini Project: Build & Apply

Fetch Data in Next.js Server Components

📖 Scenario: You are building a simple Next.js app that shows a list of users fetched from an API. You want to fetch the data directly in a server component to keep the UI fast and simple.

🎯 Goal: Build a Next.js server component that fetches user data from an API and displays the user names in a list.

📋 What You'll Learn

Create a server component file named UsersList.jsx.

Fetch user data from https://jsonplaceholder.typicode.com/users using fetch inside the server component.

Store the fetched data in a variable called users.

Render a list of user names inside an unordered list <ul>.

Use only server component features (no client-side hooks or effects).

💡 Why This Matters

🌍 Real World

Fetching data in server components is common in Next.js apps to improve performance and SEO by loading data on the server before sending HTML to the browser.

💼 Career

Understanding server components and data fetching is essential for modern React and Next.js development roles, enabling you to build fast, scalable web apps.

1

Create the Server Component File

Create a new file named UsersList.jsx and define a default exported async function component called UsersList.

NextJS

export default async function UsersList() {
  // Your code here
}

Need a hint?

Start by writing an async function named UsersList and export it as default.

2

Fetch User Data from the API

Inside the UsersList function, use fetch to get data from https://jsonplaceholder.typicode.com/users and store the JSON response in a variable called users.

NextJS

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

Need a hint?

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

3

Render the List of User Names

Return JSX that renders an unordered list <ul>. Inside it, use users.map with user as the iterator to create list items <li> showing each user.name. Use user.id as the key for each list item.

NextJS

export default async function UsersList() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await response.json();

  // Return JSX list here
  // Your code here
}

Need a hint?

Use return ( <ul> {users.map(user => <li key={user.id}>{user.name}</li>)} </ul> ).

4

Add Fetch Options to Disable Caching

Modify the fetch call by adding a second argument object with cache: 'no-store' to ensure fresh data is fetched on every request.

NextJS

export default async function UsersList() {
  // Modify fetch to disable caching
  const response = await fetch('https://jsonplaceholder.typicode.com/users', {
    // Your code here
  });
  const users = await response.json();

  return (
    
      {users.map(user => (
        {user.name}
      ))}
    
  );
}

Need a hint?

Add { cache: 'no-store' } as the second argument to fetch.