Login
Guides & Tutorials

Data fetching in Next.js with getServerSideProps and getStaticProps

In the world of server-side rendering and static site generation, Next.js has become a popular framework among JavaScript developers. One of the key features that makes Next.js powerful is its data fetching capabilities. In this guide, we will explore the two main methods of data fetching in Next.js: getServerSideProps and getStaticProps. We will look at the differences between the two methods, when to use each one, and how to implement them effectively in your Next.js projects.

Last updated on October 5, 2023 at 3:45 PM

Author's avatar

Krste Rajchevski

Software Engineer @ Bugpilot

Annoyed by React errors?
Bugpilot is the error monitoring platform for React. Catch unexpected errors, troubleshoot, and fix with our AI assistant. Learn more and create an account to start your 14-day free trial.

What is getServerSideProps?

getServerSideProps is a function that runs server-side, on every request for a page. This means that the data is fetched and rendered on the server, and the rendered HTML is then sent to the client. This method is useful when you need to fetch data that is specific to each request, such as user-specific data or real-time data.
To use getServerSideProps, you simply need to export it as a function from your page component. Here's an example:

1
2export async 
3function getServerSideProps() {
4  // Fetch data from API or database
5  const response = await fetch('https://api.example.com/data');
6  const data = await response.json();
7  // Pass data as props to component
8  return {
9    props: {
10      data
11    }
12
13  }
14;
15}
16

In the above example, we are fetching data from an API and passing it as props to the page component. The data will be available as props.data in the component's props object.

What is getStaticProps?

getStaticProps is a function that runs at build time and fetches data only once. This means that the data is pre-rendered and the generated HTML is served to the client on subsequent requests. This method is useful for static data that doesn't change frequently, such as blog posts or product listings.
To use getStaticProps, you also need to export it as a function from your page component. Here's an example:

1
2export async 
3function getStaticProps() {
4  // Fetch data from API or database
5  const response = await fetch('https://api.example.com/data');
6  const data = await response.json();
7  // Pass data as props to component
8  return {
9    props: {
10      data
11    }
12,
13    revalidate: 60 // revalidate every 60 seconds
14  }
15;
16}
17

In the above example, we are fetching data from an API and passing it as props to the page component. The revalidate option specifies how often Next.js should regenerate the HTML for this page. In this case, the page will be revalidated and regenerated every 60 seconds.

When to use getServerSideProps vs getStaticProps

Now that we understand the differences between getServerSideProps and getStaticProps, let's discuss when to use each method.
Use getServerSideProps when:

  • You need to fetch data that is specific to each request.
  • The data changes frequently and needs to be up-to-date for each request.
  • You need to fetch data from a database or real-time data source.
    Use getStaticProps when:
  • The data is static and doesn't change frequently.
  • The data doesn't need to be up-to-date for each request.
  • You want to generate HTML at build time to optimize performance.

Implementing getServerSideProps and getStaticProps

To implement getServerSideProps and getStaticProps in your Next.js projects, follow these steps:

  1. Import the necessary functions in your page component:
1import { getServerSideProps } from "next";
2import { getStaticProps } from "next";
3
  1. Define the functions and fetch data from your desired source within them.
  2. Pass the fetched data as props to your page component.
  3. Use the data in your component as needed.
    Here's an example of a Next.js page component using getServerSideProps:
1import { getServerSideProps }
2 from 'next';
3
4export default 
5function MyPage({ data }
6) {
7  // Use the fetched data in your component
8  return (
9    <div>
10      <h1>{data.title}
11</h1>
12      <p>{data.description}
13</p>
14    </div>
15  );
16}
17
18
19export async 
20function getServerSideProps() {
21  // Fetch data from API or database
22  const response = await fetch('https://api.example.com/data');
23  const data = await response.json();
24  // Pass data as props to component
25  return {
26    props: {
27      data
28    }
29
30  }
31;
32}
33

And here's an example with getStaticProps:

1import { getStaticProps }
2 from 'next';
3
4export default 
5function MyPage({ data }
6) {
7  // Use the fetched data in your component
8  return (
9    <div>
10      <h1>{data.title}
11</h1>
12      <p>{data.description}
13</p>
14    </div>
15  );
16}
17
18
19export async 
20function getStaticProps() {
21  // Fetch data from API or database
22  const response = await fetch('https://api.example.com/data');
23  const data = await response.json();
24  // Pass data as props to component
25  return {
26    props: {
27      data
28    }
29,
30    revalidate: 60
31  }
32;
33}
34

Conclusion

In this guide, we have explored the getServerSideProps and getStaticProps methods of data fetching in Next.js. We have learned when to use each method and how to implement them effectively in your Next.js projects. Now armed with this knowledge, you can confidently fetch and render data in your Next.js applications, whether it's real-time data on every request or static data at build time. Happy coding!

Annoyed by React errors?
Bugpilot is the error monitoring platform for React. Catch unexpected errors, troubleshoot, and fix with our AI assistant. Learn more and create an account to start your 14-day free trial.

Get Bugpilot