Are you tired of seeing “Object Object” instead of your precious data on your Next.js application? You’re not alone! Many developers have stumbled upon this frustrating phenomenon, only to find themselves lost in a sea of confusing documentation and trial-and-error experiments. Fear not, dear reader, for we’re about to embark on a thrilling adventure to demystify the art of fetching data on Next.js and put an end to the “Object Object” enigma once and for all!

Understanding the Problem: What’s Behind the “Object Object”?

Before we dive into the solution, it’s essential to understand the root cause of the issue. When you see “Object Object” instead of your data, it usually means that the data has been successfully fetched, but the way you’re trying to render it is incorrect. This often occurs because of Next.js’s unique approach to server-side rendering (SSR) and client-side rendering (CSR).

In Next.js, when you make an API call or fetch data using `getStaticProps` or `getServerSideProps`, the data is initially rendered on the server. However, when the client-side JavaScript loads, the same API call is made again, and the data is re-rendered. This can lead to unexpected behavior, especially if you’re not careful with how you handle the data.

The Culprits: `getStaticProps` and `getServerSideProps`

The main suspects behind the “Object Object” mystery are the `getStaticProps` and `getServerSideProps` methods. These functions allow you to pre-render pages at build time (SSG) or request time (SSR), respectively. While they’re incredibly powerful, they can also lead to confusion when it comes to data fetching.

Here’s a breakdown of how each method works:

• `getStaticProps`: This method enables Static Site Generation (SSG) and allows you to pre-render pages at build time. Any data fetched using `getStaticProps` is serialized and stored as part of the page’s HTML.
• `getServerSideProps`: This method enables Server-Side Rendering (SSR) and allows you to pre-render pages on each request. Any data fetched using `getServerSideProps` is re-fetched on each request, and the HTML is generated dynamically.

Solving the Mystery: Demystifying Data Fetching on Next.js

Now that we’ve identified the culprits, it’s time to crack the code and learn how to fetch data correctly on Next.js. We’ll explore three common scenarios and provide solutions to each:

Scenario 1: Fetching Data with `useEffect` and `useState`

In this scenario, you’re using the `useEffect` hook to fetch data and store it in a state variable using `useState`. This approach is commonly used for client-side rendering.

import { useState, useEffect } from 'react';

function MyApp() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

In this example, we’re using `useEffect` to fetch data when the component mounts, and storing it in the `data` state variable. We’re then using the `data` variable to render an unordered list.

Scenario 2: Fetching Data with `getStaticProps` and `getServerSideProps`

In this scenario, you’re using `getStaticProps` or `getServerSideProps` to pre-render pages and fetch data. This approach is commonly used for server-side rendering.

import { GetStaticProps } from 'next';

function MyApp() {
  return (
    <div>
      
Data will be rendered here</h1>
    </div>
  );
}

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

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

In this example, we’re using `getStaticProps` to fetch data and pass it as a prop to the `MyApp` component. We can then access the `data` prop and render it accordingly.

Scenario 3: Fetching Data with `useSWR` and `axios`

In this scenario, you’re using the `useSWR` hook from the `swr` library, which provides a more elegant way of fetching and caching data.

import useSWR from 'swr';
import axios from 'axios';

function MyApp() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      
Data will be rendered here</h1>
      

        {data.map(item => (
          
{item.name}
        ))}