How to fetch data in Next.js pages?

Next.js is a popular React framework that provides server-side rendering, static site generation, and many other features out of the box. One of the key aspects of building a web application is data fetching, and Next.js offers several methods to fetch data efficiently and seamlessly. This guide will walk you through the different ways to fetch data in Next.js, including:

1. Using getStaticProps for Static Generation
2. Using getServerSideProps for Server-Side Rendering
3. Using getInitialProps for Custom Server-Side Rendering
4. Using Client-Side Data Fetching with useEffect

Using getStaticProps for Static Generation

getStaticProps is used to fetch data at build time. This is perfect for pages where the data does not change frequently, such as blog posts, marketing pages, or e-commerce product listings.

Example: Using getStaticProps for Static Generation

// pages/blog/[id].js
import { useRouter } from "next/router";

export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
  );
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default BlogPost;

Using getServerSideProps for Server-Side Rendering

getServerSideProps is used to fetch data on each request. This is useful for pages where the data changes frequently, such as user dashboards, admin pages, or dynamic content based on user input.

Example: Using getServerSideProps for Server-Side Rendering

// pages/user/[id].js
export async function getServerSideProps({ params }) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/users/${params.id}`,
  );
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>{user.phone}</p>
    </div>
  );
};

export default UserProfile;

Using getInitialProps for Custom Server-Side Rendering

getInitialProps is an older data-fetching method that can be used for both server-side and client-side rendering. It is typically used in custom _app.js or _document.js.

Example: Using getInitialProps for Custom Server-Side Rendering

// pages/_app.js
import App from "next/app";

class MyApp extends App {
  static async getInitialProps(appContext) {
    const appProps = await App.getInitialProps(appContext);
    return { ...appProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default MyApp;

Using Client-Side Data Fetching with useEffect

For dynamic or interactive pages where data needs to be fetched after the initial render, useEffect and useState hooks can be used. This approach is ideal for handling user interactions or updating data without reloading the page.

Example: Using Client-Side Data Fetching with useEffect

// pages/comments.js
import { useState, useEffect } from "react";

const Comments = () => {
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchComments = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/comments");
      const data = await res.json();
      setComments(data);
      setLoading(false);
    };

    fetchComments();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Comments</h1>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.body}</li>
        ))}
      </ul>
    </div>
  );
};

export default Comments;

Combining Data Fetching Methods

In some cases, you may need to combine different data-fetching methods to build a more robust and efficient application. Here are a few examples:

Example: Combining getStaticProps with Client-Side Fetching

You can use getStaticProps to fetch initial data and then use client-side fetching to update the data when the user interacts with the page.

// pages/posts.js
import { useEffect, useState } from "react";

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const initialPosts = await res.json();

  return {
    props: {
      initialPosts,
    },
  };
}

const Posts = ({ initialPosts }) => {
  const [posts, setPosts] = useState(initialPosts);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      const updatedPosts = await res.json();
      setPosts(updatedPosts);
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

Example: Using getStaticProps and getServerSideProps Together

Sometimes you may need to fetch some data at build time and some data at request time. For instance, you might want to statically generate product pages but fetch user-specific recommendations on each request.

// pages/product/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
  );
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const products = await res.json();

  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getServerSideProps(context) {
  const res = await fetch("https://api.example.com/recommendations", {
    headers: {
      Cookie: context.req.headers.cookie,
    },
  });
  const recommendations = await res.json();

  return {
    props: {
      recommendations,
    },
  };
}

const ProductPage = ({ product, recommendations }) => {
  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.body}</p>
      <h2>Recommended for you</h2>
      <ul>
        {recommendations.map((rec) => (
          <li key={rec.id}>{rec.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductPage;

Handling Errors in Data Fetching

Error handling is crucial in any data-fetching scenario to ensure a smooth user experience. You can handle errors in various ways, such as showing a fallback UI, logging the error, or retrying the fetch.

Example: Error Handling with getServerSideProps

// pages/user/[id].js
export async function getServerSideProps({ params }) {
  try {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/users/${params.id}`,
    );
    if (!res.ok) {
      throw new Error("Failed to fetch user");
    }
    const user = await res.json();

    return {
      props: {
        user,
      },
    };
  } catch (error) {
    return {
      notFound: true,
    };
  }
}

const UserProfile = ({ user }) => {
  if (!user) {
    return <div>User not found</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>{user.phone}</p>
    </div>
  );
};

export default UserProfile;

Optimizing Data Fetching with SWR

SWR (stale-while-revalidate) is a React Hooks library for data fetching that improves the user experience by providing features like caching, revalidation, focus tracking, and more.

Example: Using SWR

// pages/posts.js
import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

const Posts = () => {
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts",
    fetcher,
  );

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

---

Frequently Asked Questions (FAQ) on Data Fetching in Next.js

---

---

Conclusion

Next.js provides multiple ways to fetch data, catering to different use cases and performance requirements. By understanding and utilizing getStaticProps, getServerSideProps, getInitialProps, and client-side fetching with useEffect, you can build efficient and scalable web applications.

Choose the appropriate data-fetching method based on your application’s needs:

• Static Generation (getStaticProps): For data that does not change often.
• Server-Side Rendering (getServerSideProps): For data that changes frequently or is user-specific.
• Custom Server-Side Rendering (getInitialProps): For older codebases or when you need more control over server-side rendering.
• Client-Side Fetching (useEffect): For interactive pages or real-time data updates.

These methods, you can ensure your Next.js application performs optimally and delivers a great user experience.

Understanding the various data-fetching methods in Next.js and their use cases, you can build efficient and performant web applications. Whether you need static generation, server-side rendering, or client-side fetching, Next.js provides the tools to handle your data-fetching needs effectively. For any specific questions or advanced use cases, refer to the official Next.js documentation and community resources.