How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined – Next.js

The Problem:

The user is encountering an issue while fetching data from a server-side API using Next.js. They are using the latest version of Next.js and have tried using the getStaticProps method, but it is not running and they are getting undefined when trying to access the data. The issue seems to be related to the use of getStaticProps, and the user needs assistance in resolving the issue and fetching the data successfully.

The Solutions:

Solution 1: Using Server Components

The provided solution recommends using Next.js Server Components to fetch data directly within the component body. Server Components allow for data fetching on the server-side, similar to `getServerSideProps` and `getStaticProps`, but can be used in any component within the `app` directory.

In the provided code sample, a `Component` function is defined as the default export of a page component. Within this function, three different data fetching methods are demonstrated:

1. Static data: Fetched with `cache: “force-cache”` (default), similar to `getStaticProps` with no revalidation.
2. Dynamic data: Fetched with `cache: “no-store”`, similar to `getServerSideProps`. This data is refetched on every request.
3. Revalidated data: Fetched with `next: { revalidate: 10 }`, similar to `getStaticProps` with revalidation. This data is cached for 10 seconds before being revalidated.

This approach provides flexibility in data fetching and allows for a more fine-grained control over how data is cached and refreshed.

Solution 2: Fetch Data in Static Components

Approach:

In Next.js 13, getStaticProps is no longer used in static rendering components. Instead, you can achieve the same effect by fetching data directly in these components using fetch. This approach is similar to using getStaticProps and results in server-side data fetching at build time.

Example:

To fetch data in a static component, use the following syntax:

// Similar to 'getStaticProps' in static components
const data = await fetch(API_URL);

This will fetch data at build time instead of on-demand during requests, resulting in faster page loads and reduced code transmission to users.

Benefits:

Using fetch in static components offers the same benefits as getStaticProps: pre-rendering pages, sending less code to users, and improving SEO.

Additional Considerations:

• If you need to generate a large number of static pages using dynamic routes, use the generateStaticParams function instead of fetch to generate the pages at build time.
• If you are unfamiliar with dynamic routes, it is recommended to use fetch for now.

Solution 3: {title}

In the app directory, you cannot use methods like `getServerSideProps`, `getStaticProps`, or `getInitialProps` for data fetching. Instead, with server component, you can make the component itself async and fetch data in the component body directly. Furthermore, you can pass the data to the client component for server-side rendering.

export async function getData() {
  const res = await fetch();
  const data = res.json();

  return data;
}

Now, you can call this async function in your main component:

export async function () {
  const data = await getData();
  return <ClientComponent data />;
}

Video Explanation: