[Next.js 15] - Part 10. Actually Fetching Data with fetch inside a Server Component

Ace Lennox

03 Jan 20254 minutes to read

Now that we’ve set up the mock server, let’s fetch the data from it and display it on one of our pages. Specifically, we’ll use the Projects page for this purpose, showcasing mock GitHub repositories as part of our portfolio.

Introduction to Data Fetching in Next.js 15

In Next.js, you fetch data on the server by using the fetch function. This function is built into modern browsers and Node.js, making it universally available. However, in Next.js, the fetch function is extended to include built-in caching capabilities. This behavior is slightly different from the standard browser fetch function. We’ll dive deeper into caching and revalidation later.

For now, we’ll focus on how to fetch data in a Server Component. The steps include:

Making the component function async.
Using fetch to retrieve data from a specific URL or path.
Optionally handling errors and ensuring the response is parsed as JSON.

Step 1: Run the Application and Mock Server

Before fetching data, ensure both the Next.js app and mock server are running:

1. Start the Next.js development server:

npm run dev

2. Open a new terminal and start the mock server:

npm run json-server

Verify that the mock API is accessible at http://localhost:3001/repos. Visiting this URL in your browser should return the JSON data from the mock server.

Step 2: Fetch Data in the Projects Page

Now, let’s fetch the data and render it on the Projects page:

1. Make the Component Function Async

Modify the Projects page’s default export function to be async. This allows us to use the await keyword for asynchronous operations.

export default async function Projects() {
    // Fetch data
}

2. Fetch Data from the Mock API

Use the fetch function to retrieve data from http://localhost:3001/repos. Parse the response as JSON to extract the data.

const response = await fetch('http://localhost:3001/repos');
const repos = await response.json();

3. Render the Data

Use JSX to display the fetched data. Start by adding a header and then map over the repos array to render each repository’s details.

return (
    <div style={{ padding: '20px' }}>
        <h1 style={{ marginBottom: '20px' }}>Projects</h1>
        <ul>
            {repos.map((repo) => (
                <li key={repo.id} style={{ marginBottom: '16px' }}>
                    <h2>{repo.title}</h2>
                    <p>{repo.description}</p>
                    <p>Stars: {repo.stargazers_count}</p>
                </li>
            ))}
        </ul>
    </div>
);

4. Save and Test

After saving the changes, visit the Projects page in your browser. The repositories from the mock server should be displayed with their titles, descriptions, and star counts.

Step 3: Explore Performance and Error Scenarios

Currently, everything works seamlessly because:

The mock API is fast.
There are no errors or delays.

In the next steps, we’ll explore more challenging scenarios:

Handling slow endpoints or delays in data fetching.
Managing errors during the fetch process.
Optimizing the performance of server-rendered pages.

Stay tuned as we tackle these advanced topics and improve your understanding of data fetching in Next.js!

← [Next.js 15] - Part 9. Running a Mock JSON Server

[Next.js 15] - Part 11. Understanding Data Cache and Request Memoization →

Latest Posts

View All