如何在 Next.js 中在構建時在所有頁面上全局緩存數據
在我使用 Next.js 架構的網站中,需要在構建時從 API 中獲取數據。 我嘗試了多種解決方案,但都沒有成功。經過大量的研究和試誤,我找到了解決方案。 這個解決方案同樣適用於本地開發(localhost)和 Vercel(生產環境)。 以下是情景描述:我有一個存儲“成員”電子郵件的位置,可以是遠程數據庫、Airtable 或其他任何地方。 我只想下載這些數據一次,然後在網站上一直保持可用,直到我觸發下一次構建。 這個成員列表非常靜態,最多一天可能會變化一次。如果這個列表發生變化,我只需要使用 Vercel 的 Deploy Hooks 以編程方式觸發重新部署。 以下是操作計劃。我們將在 .members 文件中創建數據的本地緩存。 在 lib/members.js 文件中的一個函數將負責在第一次調用時從緩存中將數據提取並存儲為 JSON,以後每次調用時從緩存中讀取數據: import fs from 'fs' import path from 'path' function fetchMembersData() { console.log('正在獲取成員數據...') return [{ email: '[[email protected]](/cdn-cgi/l/email-protection)' }, { email: '[[email protected]](/cdn-cgi/l/email-protection)' }] } const MEMBERS\_CACHE\_PATH = path.resolve('.members') export default async function getMembers() { let cachedData try { cachedData = JSON.parse( fs.readFileSync(path.join(\_\_dirname, MEMBERS\_CACHE\_PATH), 'utf8') ) } catch (error) { console....