為什麼我應該避免在 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中文網其他相關文章！