为什么我应该避免在 getServerSideProps() 中使用 Fetch 获取内部 API？

Next.js 中使用 getServerSideProps 进行内部 API 获取

Next.js 的新手在处理页面之间的数据获取或页面之间的数据获取时经常会遇到困境成分。例如，当使用 getServerSideProps() 获取返回用户数据的内部 API 时，很自然地认为这种方法非常适合 SEO 目的。但是，Next.js 文档建议不要使用 fetch() 在 getServerSideProps() 中调用 API 路由。

为什么要避免在 getServerSideProps() 中获取 API 路由？

在 getServerSideProps() 中使用 fetch() 调用内部 API 路由是不必要的，因为 getServerSideProps() 和 API 路由都在服务器上执行。这个额外的请求效率很低，也没有带来任何额外的好处。

推荐做法

不要从 getServerSideProps() 调用内部 API，应该直接从API路线。这允许 getServerSideProps() 直接与数据库、文件系统或其他资源交互，而无需引入不必要的 API 调用。

示例重构

考虑用于获取的 API 路由来自外部 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);
}

此逻辑可以提取到一个单独的函数中，该函数可在 API 路由和 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);
}

这允许getData() 函数可在 getServerSideProps() 中重用：

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

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

通过遵循这些准则，开发人员可以提高其 Next.js 应用程序的性能和效率，同时保持 SEO 优势。

以上是为什么我应该避免在 getServerSideProps() 中使用 Fetch 获取内部 API？的详细内容。更多信息请关注PHP中文网其他相关文章！