Data fetching in server components in NextJS - Mini Project: Build & Apply

Data fetching in server components

📖 Scenario: You are building a simple Next.js app that shows a list of users fetched from an API. You will use server components to fetch the data on the server side and render it directly.

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

📋 What You'll Learn

Create a server component named UsersList

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

Store the fetched data in a variable called users

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

Use async and await for data fetching

Export the component as default

💡 Why This Matters

🌍 Real World

Fetching data on the server side improves performance and SEO by sending fully rendered pages to the browser. This is common in modern web apps.

💼 Career

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

1

Create the server component and import React

Create a new file named UsersList.jsx. Inside it, write a React server component named UsersList that is an async function. Start by importing React from "react".

NextJS

import React from "react"

// Your code here

Need a hint?

Remember, server components can be async functions in Next.js.

2

Fetch user data from the API

Inside the UsersList component, create a constant variable named response that fetches data from https://jsonplaceholder.typicode.com/users using await fetch(). Then create another constant named users that awaits response.json() to parse the JSON data.

NextJS

import React from "react"

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

Need a hint?

Use await before fetch and response.json() to wait for the data.

3

Render the list of user names

Inside the UsersList component, return a JSX fragment that contains an unordered list <ul>. Use users.map() with user as the iterator variable to create a list item <li> for each user. Display the user's name inside each <li>. Add a unique key prop to each <li> using user.id.

NextJS

import React from "react"

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

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

Need a hint?

Use users.map() to create list items and remember to add a key prop.

4

Complete and export the server component

Ensure the UsersList component is exported as the default export. The component should be a fully working server component that fetches and displays the user names in a list.

NextJS

import React from "react"

// Make sure the component is exported as default
// Your code here

Need a hint?

The component must be exported as default to be used in Next.js pages.