Home > Web Front-end > JS Tutorial > Why Should I Avoid Using Fetch for Internal APIs in getServerSideProps()?

Why Should I Avoid Using Fetch for Internal APIs in getServerSideProps()?

DDD
Release: 2024-11-16 18:29:03
Original
499 people have browsed it

Why Should I Avoid Using Fetch for Internal APIs in getServerSideProps()?

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);
}
Copy after login

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);
}
Copy after login

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();
  //...
}
Copy after login

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

The above is the detailed content of Why Should I Avoid Using Fetch for Internal APIs in getServerSideProps()?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template