Why data fetching differs in Next.js - See It in Action

Understanding Why Data Fetching Differs in Next.js

📖 Scenario: You are building a simple blog homepage using Next.js. You want to show a list of posts fetched from an API. Next.js offers different ways to fetch data, and you want to understand how to set up data fetching correctly for server-side rendering and static generation.

🎯 Goal: Build a Next.js page that fetches blog post data using getStaticProps and displays the post titles. Learn why data fetching in Next.js differs from traditional React apps.

📋 What You'll Learn

Create a Next.js page component named BlogPage

Use getStaticProps to fetch data at build time

Display the list of post titles on the page

Understand the difference between server-side and client-side data fetching in Next.js

💡 Why This Matters

🌍 Real World

Next.js is used to build fast websites that load data before showing pages, improving user experience and search engine ranking.

💼 Career

Understanding Next.js data fetching methods is essential for frontend developers working with React frameworks to build scalable and SEO-friendly web apps.

1

Set up initial posts data array

Create a constant called posts that is an array of objects with these exact entries: { id: 1, title: 'Hello Next.js' } and { id: 2, title: 'Learn Data Fetching' }.

NextJS

# Your code here

Need a hint?

Use const posts = [ ... ] with two objects inside the array.

2

Add getStaticProps function to fetch posts

Add an async function called getStaticProps that returns an object with a props key containing the posts array.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn Data Fetching' }
];

// Your code here

Need a hint?

Define getStaticProps as an async function that returns { props: { posts } }.

3

Create BlogPage component to display posts

Create a React functional component called BlogPage that accepts posts as a prop and returns a <ul> with each post's title inside a <li>. Use post.id as the key.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn Data Fetching' }
];

export async function getStaticProps() {
  return {
    props: {
      posts
    }
  };
}

// Your code here

Need a hint?

Use posts.map inside the component to create list items.

4

Export BlogPage as default and explain data fetching difference

Ensure BlogPage is exported as the default export. Understand that getStaticProps runs at build time on the server, so data fetching differs from client-side fetching in React by preloading data before the page loads.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learn Data Fetching' }
];

export async function getStaticProps() {
  return {
    props: {
      posts
    }
  };
}

export default function BlogPage({ posts }) {
  return (
    
      {posts.map(post => (
        {post.title}
      ))}
    
  );
}

// Your code here

Need a hint?

Make sure BlogPage is the default export and getStaticProps is present.