Next.js React Framework

Data Fetching

Data fetching is a critical aspect of modern web applications, and Next.js offers several powerful and flexible ways to handle it. Understanding these methods is essential for building performant and dynamic websites. In this section, we'll explore the core concepts and techniques for fetching data in Next.js.

Server-Side Rendering (SSR) with getServerSideProps

Next.js's getServerSideProps function allows you to fetch data on the server before the page is rendered. This is particularly useful for pages that require up-to-date information or need to be indexed by search engines. Each request to such pages will trigger data fetching, and this method makes the data readily available to the component upon loading.

            
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}
            
        

In this example, the getServerSideProps fetches data from an API endpoint and passes it as props to the React component of that page.

Static Site Generation (SSG) with getStaticProps

getStaticProps is used for static site generation (SSG), which fetches data at build time. This method is ideal for content that does not change frequently and allows for incredibly fast page loading.

            
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
   revalidate: 10,// Optional revalidation in seconds
  };
}
            
        

Here, the getStaticProps retrieves data, which is made available during the build and can also be optionally revalidated on the server after a specific period.

Client-Side Data Fetching

For dynamic content that needs to be updated frequently or content that is user-specific, client-side data fetching is the way to go. Next.js allows you to fetch data in your React components using hooks like useEffect, or using libraries like SWR or React Query, that can greatly simplify the data fetching process.

            
import { useState, useEffect } from 'react';

function MyComponent() {
  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 <div>Loading...</div>;

    return <div>{JSON.stringify(data)}</div>;
}
            
        

This snippet demonstrates fetching data using useEffect.

Incremental Static Regeneration (ISR)

ISR combines the benefits of static generation with the flexibility of server-side rendering. With ISR, you can define a revalidation period for your static pages. During build time, pages are pre-rendered, and after the specified period has elapsed (or if a user visits a page and the content is outdated), the content is updated in the background. This ensures that your static pages are always relatively up-to-date without requiring a full rebuild.

Choosing the Right Approach

Selecting the proper data-fetching strategy depends on the use case. Use getStaticProps for static content that can be pre-rendered at build time, getServerSideProps for frequently updated data that needs to be rendered on each request, and client-side fetching for dynamic user-specific content.

In summary, Next.js offers robust options for data fetching, ensuring that you can always use the best technique for any scenario, to create a high performance application.