Data Fetching Methods in Next.js

What You’ll Learn 📚

• Core concepts of data fetching in Next.js
• Key terminology explained simply
• Progressively complex examples
• Common questions and troubleshooting tips

Introduction to Data Fetching in Next.js

Next.js is a powerful React framework that allows you to build server-side rendered applications with ease. One of its standout features is its data fetching capabilities, which enable you to fetch data on the server side, client side, or during build time. Understanding these methods is crucial for creating efficient and dynamic web applications.

Key Terminology

• Server-Side Rendering (SSR): Rendering a page on the server for each request.
• Static Site Generation (SSG): Pre-rendering pages at build time.
• Client-Side Rendering (CSR): Fetching data on the client side after the page has loaded.

Simple Example: Fetching Data with getStaticProps

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    

      
Data from API
      
{JSON.stringify(data, null, 2)}

  );

}

In this example, getStaticProps is used to fetch data at build time. This means the data is fetched once and the page is generated as a static HTML file. It’s perfect for data that doesn’t change often.


Expected Output: A static page displaying data from the API.

Progressively Complex Examples

Example 2: Server-Side Rendering with getServerSideProps

// pages/server.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

export default function ServerPage({ data }) {
  return (
    

      
Server-Side Data
      
{JSON.stringify(data, null, 2)}

  );

}

Here, getServerSideProps fetches data on each request, ensuring the most up-to-date information. This is ideal for data that changes frequently.


Expected Output: A page that fetches fresh data on every request.

Example 3: Client-Side Data Fetching
// pages/client.js
import { useEffect, useState } from 'react';

export default function ClientPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/data');
      const data = await res.json();
      setData(data);
    }
    fetchData();
  }, []);

  if (!data) return 
Loading...
;

  return (
    

      
Client-Side Data
      
{JSON.stringify(data, null, 2)}

  );

}

This example demonstrates client-side data fetching using React hooks. The data is fetched after the component mounts, which is useful for user-specific data or when SEO is not a concern.


Expected Output: A loading message followed by the data once fetched.

Common Questions and Answers

Why use getStaticProps over getServerSideProps?
Use getStaticProps for pages that can be pre-rendered at build time, offering better performance and SEO.

Can I use getStaticProps with dynamic routes?
Yes, by combining it with getStaticPaths to specify which paths to pre-render.

What happens if data fetching fails?
Handle errors gracefully by returning fallback content or error messages.


Troubleshooting Common Issues
Ensure your API endpoints are accessible and CORS policies are correctly configured to avoid fetch errors.
Remember, getStaticProps and getServerSideProps only run on the server side, so you can’t use browser-specific APIs like window or document.
Practice Exercises

Create a page that uses getStaticProps to fetch and display a list of items from an API.
Modify the client-side example to handle errors and display a retry button.

For more information, check out the Next.js documentation on data fetching.