您是否應該在 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中文網其他相關文章！