Fetching Data from an External API in Next.js using getServerSideProps

In Next.js, getServerSideProps is a function that allows you to fetch data on the server side before rendering a page. This is particularly useful for fetching data from an external API every time a page is requested.

Example Implementation

Here’s a step-by-step example of how to use getServerSideProps to fetch data from an external REST API:

Step 1: Create a Page Component

Create a new file in the pages directory, for example, pages/example.js.

1// pages/example.js
2import React from 'react';
3
4const ExamplePage = ({ data }) => {
5  return (
6    <div>
7      <h1>Data from API</h1>
8      <pre>{JSON.stringify(data, null, 2)}</pre>
9    </div>
10  );
11};
12
13export const getServerSideProps = async () => {
14  try {
15    const res = await fetch('https://api.example.com/data'); // Replace with your API URL
16    const data = await res.json();
17
18    if (!res.ok) {
19      throw new Error('Failed to fetch data');
20    }
21
22    return {
23      props: { data }, // Pass data to the page component as props
24    };
25  } catch (error) {
26    console.error(error);
27    return {
28      props: { data: null }, // Handle error by passing null or a fallback value
29    };
30  }
31};
32
33export default ExamplePage;

1// pages/example.js
2import React from 'react';
3
4const ExamplePage = ({ data }) => {
5  return (
6    <div>
7      <h1>Data from API</h1>
8      <pre>{JSON.stringify(data, null, 2)}</pre>
9    </div>
10  );
11};
12
13export const getServerSideProps = async () => {
14  try {
15    const res = await fetch('https://api.example.com/data'); // Replace with your API URL
16    const data = await res.json();
17
18    if (!res.ok) {
19      throw new Error('Failed to fetch data');
20    }
21
22    return {
23      props: { data }, // Pass data to the page component as props
24    };
25  } catch (error) {
26    console.error(error);
27    return {
28      props: { data: null }, // Handle error by passing null or a fallback value
29    };
30  }
31};
32
33export default ExamplePage;

Step 2: Explanation of the Code

• Page Component: The ExamplePage component receives data as a prop and displays it.
• getServerSideProps: This function runs on the server for each request:
  • It fetches data from the specified API.
  • It checks if the response is okay; if not, it throws an error.
  • It returns the fetched data as props to the page component.
  • In case of an error, it logs the error and returns null for the data.

Best Practices

1. Error Handling: Always handle errors gracefully. You can return a fallback value or an error message to the component.
2. Performance: Be mindful of the API response time, as it can affect the page load time. Consider caching strategies if applicable.
3. Data Validation: Validate the data structure you receive from the API to avoid runtime errors in your component.
4. Avoiding Unnecessary Fetches: If the data does not change often, consider using static generation (getStaticProps) or client-side fetching with SWR or React Query for better performance.

Potential Pitfalls

• Blocking Requests: Since getServerSideProps runs on every request, it can slow down your application if the API is slow or unresponsive.
• SEO Considerations: Ensure that the data fetched is relevant for SEO, as it will be rendered on the server.
• Rate Limiting: Be aware of the API's rate limits to avoid being blocked.

By following this guide, you should be able to effectively fetch data from an external API using getServerSideProps in your Next.js application.