Should You Use `fetch()` for Internal APIs in `getServerSideProps()` in Next.js?

Fetching Internal API in getServerSideProps: Balancing SEO and Best Practices

Introduction:

In Next.js, component data can be loaded on the server using getServerSideProps(). This aids SEO, as props are retrieved and processed server-side, enabling immediate rendering. However, using fetch() to access internal API routes within getServerSideProps() is discouraged according to the Next.js documentation. This article delves into the reasons behind this recommendation and explores alternative approaches that maintain SEO compatibility.

Avoid Calling Internal APIs Directly with fetch()

While fetch() can be employed to retrieve data from internal API routes within getServerSideProps(), it's advised against. The server-side nature of getServerSideProps() allows you to directly access logic, databases, and other resources without the need for an additional API request.

Reusing API Route Logic in getServerSideProps()

To overcome this, consider extracting the API route's fetching functionality into a separate function. This function can be invoked both by the API route and within getServerSideProps(), enabling the sharing of data-fetching logic while avoiding unnecessary API calls.

Example:

Assuming the API route, pages/api/user, contains the following code:

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

We can extract the data-fetching logic into a function called getData():

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);
}

In getServerSideProps(), we can then utilize getData():

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

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

By implementing this approach, we maintain the efficiency and SEO benefits of getServerSideProps() while respecting the recommended data-fetching practices outlined by Next.js.

The above is the detailed content of Should You Use `fetch()` for Internal APIs in `getServerSideProps()` in Next.js?. For more information, please follow other related articles on the PHP Chinese website!