首頁 > web前端 > js教程 > 如何在 Next.js 的 getServerSideProps() 中取得內部 API 並實作快取?

如何在 Next.js 的 getServerSideProps() 中取得內部 API 並實作快取?

Barbara Streisand
發布: 2024-11-15 19:20:03
原創
773 人瀏覽過

How to Fetch Internal APIs and Implement Caching in Next.js's getServerSideProps()?

在 getServerSideProps 中取得內部 API:最佳實務和快取

在 Next.js 中,有效管理頁面和元件之間的資料至關重要。但是,應遵循某些實踐以確保良好的編碼實踐和 SEO 合規性。本文解決了在 getServerSideProps() 中執行內部 API 取得的問題。

在 getServerSideProps() 中使用 fetch()

與先前的理解相反,Next.js 文件建議不要使用 fetch( ) 在 getServerSideProps() 中呼叫內部 API 路由。相反,它建議將邏輯從 API 路由直接轉移到 getServerSideProps() 中。這消除了不必要的額外請求,因為 getServerSideProps() 和 API 路由都在伺服器上執行。

提取 API 邏輯的優點

將獲取邏輯與 API 路由分離不僅可以重複使用它在 API 路由本身以及 getServerSideProps() 中。這種方法簡化了程式碼庫管理並增強了靈活性。

快取注意事項

快取在提高效能方面發揮著至關重要的作用。使用 SWR 等技術進行客戶端快取非常簡單。然而,在伺服器上實作快取需要不同的方法。一種技術是直接在 getServerSideProps() 中實作快取邏輯,利用 Redis 或 Memcached 等伺服器端快取機制。

重構範例

考慮以下範例:

1

2

3

4

5

6

7

8

9

10

11

// pages/api/user.js

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() 函數可以在API 路由處理程序中使用並在getServerSideProps() 內。這可以實現更清晰的程式碼和高效的資料收集。

以上是如何在 Next.js 的 getServerSideProps() 中取得內部 API 並實作快取?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板