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

Async Server Components in Next.js

📖 Scenario: You are building a simple Next.js app that fetches user data from an API and displays it on the server side. This helps your app load faster and improves SEO.

🎯 Goal: Create an async server component in Next.js that fetches user data from a public API and renders the user names in a list.

📋 What You'll Learn

Create a server component that fetches data asynchronously

Use the fetch API inside the server component

Render the fetched data as a list of user names

Use Next.js 14+ App Router conventions

💡 Why This Matters

🌍 Real World

Fetching data on the server before rendering pages is common in real-world web apps to improve speed and SEO.

💼 Career

Understanding async server components is essential for modern Next.js development roles focused on performance and user experience.

1

Create the basic server component

Create a file called page.tsx inside the app directory. Inside it, create a default exported async function called Page that returns a simple <div>Loading users...</div> JSX element.

NextJS

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

Need a hint?

This is the basic structure of a server component in Next.js. It must be an async function to fetch data later.

2

Add the API URL configuration

Inside page.tsx, add a constant called apiUrl and set it to the string "https://jsonplaceholder.typicode.com/users". This will be the URL to fetch user data.

NextJS

const apiUrl = "https://jsonplaceholder.typicode.com/users";

export default async function Page() {
  return Loading users...;
  // Your code here
}

Need a hint?

This URL will be used to fetch user data in the next step.

3

Fetch user data asynchronously

Inside the Page function, use await fetch(apiUrl) to get the response. Then use await response.json() to parse the JSON data and store it in a variable called users.

NextJS

const apiUrl = "https://jsonplaceholder.typicode.com/users";

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

Need a hint?

Use await to wait for the fetch and JSON parsing to complete before continuing.

4

Render the list of user names

Replace the <div>Loading users...</div> with a <ul> element. Inside it, use users.map to create a <li> for each user showing their name. Make sure each <li> has a unique key using the user's id.

NextJS

const apiUrl = "https://jsonplaceholder.typicode.com/users";

export default async function Page() {
  const response = await fetch(apiUrl);
  const users = await response.json();
  // Your code here
}

Need a hint?

Use JSX to loop over the users and display their names in a list.