您是否应该在 Next.js 的 `getServerSideProps()` 中使用 `fetch()` 作为内部 API？

在 getServerSideProps 中获取内部 API：平衡 SEO 和最佳实践

简介：

中Next.js，可以使用 getServerSideProps() 将组件数据加载到服务器上。这有助于搜索引擎优化，因为道具是在服务器端检索和处理的，从而可以立即渲染。但是，根据 Next.js 文档，不鼓励使用 fetch() 访问 getServerSideProps() 中的内部 API 路由。本文深入探讨了此建议背后的原因，并探讨了保持 SEO 兼容性的替代方法。

避免使用 fetch() 直接调用内部 API

虽然 fetch() 可以不建议使用 getServerSideProps() 从内部 API 路由检索数据。 getServerSideProps() 的服务器端性质允许您直接访问逻辑、数据库和其他资源，而无需额外的 API 请求。

在 getServerSideProps() 中重用 API 路由逻辑

为了克服这个问题，请考虑将 API 路由的获取功能提取到一个单独的函数中。此函数既可以通过 API 路由调用，也可以在 getServerSideProps() 内调用，从而可以共享数据获取逻辑，同时避免不必要的 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);
}

我们可以将数据获取逻辑提取到一个名为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);
}

在 getServerSideProps() 中，我们可以利用 getData():

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

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

通过实现这种方法，我们可以保持 getServerSideProps() 的效率和 SEO 优势，同时遵守 Next 概述的推荐数据获取实践。 js.

以上是您是否应该在 Next.js 的 `getServerSideProps()` 中使用 `fetch()` 作为内部 API？的详细内容。更多信息请关注PHP中文网其他相关文章！