Internal API Fetch with getServerSideProps in Next.js

Newcomers to Next.js often encounter a dilemma when dealing with data fetching between pages or components. For instance, when using getServerSideProps() to fetch an internal API that returns user data, it's natural to think that this approach is ideal for SEO purposes. However, the Next.js documentation advises against using fetch() to call API routes within getServerSideProps().

Why Avoid Fetching API Routes in getServerSideProps()?

Calling an internal API route with fetch() within getServerSideProps() is unnecessary because both getServerSideProps() and API routes execute on the server. This extra request is inefficient and provides no additional benefit.

Recommended Practice

Instead of calling the internal API from getServerSideProps(), the logic should be directly imported from the API route. This allows getServerSideProps() to directly interact with the database, filesystem, or other resources without introducing unnecessary API calls.

Example Refactor

Consider an API route used for fetching data from an external API:

// pages/api/user
export default async function handler(req, res) {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  res.status(200).json(jsonData);
}

This logic can be extracted into a separate function that can be used in both the API route and getServerSideProps():

// pages/api/user
export async function getData() {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  return jsonData;
}

export default async function handler(req, res) {
  const jsonData = await getData();
  res.status(200).json(jsonData);
}

This allows the getData() function to be reused in getServerSideProps():

// pages/home
import { getData } from './api/user';

export async function getServerSideProps(context) {
  const jsonData = await getData();
  //...
}

By following these guidelines, developers can improve the performance and efficiency of their Next.js applications while maintaining SEO benefits.