在 Vercel 上的 Revalidation 和 ISR 的一個坑點

我對某件事感到驚訝,所以我寫了一篇文章來介紹。 第一次測試 ISR,這是 Next.js 提供的一個非常酷的功能。 基本上,我們可以在構建時靜態生成網站,因此一開始就提前獲取了所有的數據,然後 Next.js 提供了網頁的緩存版本。 但是我們也可以告訴 Next.js 網頁應該每隔 n 秒重新驗證一次。 所以我們可以設置(Next.js 13 應用文件夾): export const revalidate = 30 然後每 30 秒重新驗證一次該頁面。 該頁面會以超快的速度提供給在上一次驗證後 30 秒之後首次訪問該 URL 的用戶(需要有人在重新驗證之前訪問該 URL,它不是一個定時任務),但在後台它會再次構建,完成任何需要進行的數據獲取。 這很酷。 但在 Vercel 上,重新驗證流程運行在一個無服務器函數中。 這讓我花了好幾個小時來解決一個我認為是一個 BUG 的問題(新的應用程序文件夾仍處於 beta 階段,所以可能會發生),但是我要麼沒有閱讀正確的文檔,要麼文檔並沒有很好地記錄。 重新驗證的無服務器函數運行在與第一次構建不同的環境中。 第一次構建可以寫入文件系統。重新驗證的無服務器函數無法這樣做。它可以寫入系統的臨時文件夾,您可以使用 os.tmpdir()(首先需要 import os from 'os')獲取該臨時文件夾,但與其他構建之間沒有"通信"。 我試圖下載一些圖像,並將其作為站點的一部分,但這種工作流程是行不通的。 此外,我們無法訪問原始構建中下載的先前文件,因為我們看不到它們,我們處於全新的環境中。 這可能在無服務器函數環境中是常識,但對我來說是個驚喜。 不管怎樣,一旦您了解到這一點,您就會知道限制並找到解決方法。 例如,我可以將資源託管在 S3 上,或者像我最終為快速解決方案所做的那樣,將小圖像編碼為數據 URI。 哦,還有一個提示:為了調試重新驗證,我使用了按需重新驗證,這真的很酷。 因此,我可以訪問 API 端點來重新驗證特定的頁面路由,而無需等待重新驗證的時間。 使用按需重新驗證的一個坑點是,我在一個不獲取數據的路由上啟用了重新驗證(因為我將所有要解決的問題)從中剝離了所有數據獲取),當我嘗試使用 ODR 時,我遇到了這個問題,它顯然表示無法完成重新驗證,因為沒有數據可以重新驗證。基本上,它被標記為服務器錯誤,但實際上不是。這可能是一個在以後的更新中被修復的問題,請記住本文章的日期。

如何使用Netlify Edge功能

Netlify Edge功能是Netlify提供的一個非常有趣的功能,Netlify是一個流行的托管平台。 這個功能非常有趣,因為雖然Netlify以靜態托管聞名,但Edge功能允許您進行一些不太靜態的操作。 讓我們可以做到以下這些事情: 地理定位 本地化 A/B測試 重定向 …等等 它們與Netlify Serverless功能類似,只不過它們運行在Netlify邊緣(Edge)上,這意味著它們更接近用戶並在多個CDN位置運行,計算方式也不同(每月3百萬次呼叫,而不是每個站點每月12.5萬呼叫)。 要啟用Edge功能,請在您的網站存儲庫中創建一個netlify.toml文件(如果您尚未擁有),並添加以下內容: [[edge_functions]] function = "hello" path = "/hello" 其中function是netlify/edge-functions/下的文件名,不包括.js擴展名。 path是此功能將可用於的URL路徑。 然後,您可以在文件netlify/edge-functions/hello.js中編寫一個功能: export default () => new Response("Hello world"); Response是可用於將回應發送回客戶端的對象。 一旦您部署了存儲庫,就可以使用以下URL訪問其結果: https://<您的網站域名>/hello 試試看吧! 在部署期間,您將在日誌中看到以下信息: 一旦部署完成,您將看到動態生成的帶有內容Hello, World!的頁面。 但是我建議您預先使用Netlify CLI的netlify dev在本地測試它們。請確保使用npm i -g netlify-cli將其更新到最新版本,否則它可能沒有啟用此功能。 您可以設置回應標頭,例如內容類型,通過將第二個參數傳遞給new Response(): export default () => new Response('Hello world', { headers: { 'content-type': 'text/html' }, }); Edge功能接收兩個參數:request和context: export default (request, context) => { //... }; 這兩個對象提供了一些有用的功能。 request允許您訪問所有request數據,它與使用Fetch API時獲得的請求對象相同。...