」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Next.js 快取:透過高效的資料獲取來增強您的應用程式

Next.js 快取:透過高效的資料獲取來增強您的應用程式

發佈於2024-11-08
瀏覽:736

Next.js 中的快取不僅是為了節省時間,還在於減少冗餘網路請求、保持資料新鮮並使您的應用程式像搖滾明星一樣運作。
無論您是想將資料快取更長時間還是按需刷新,Next.js 都能為您提供所需的所有工具。在本文中,我們將詳細介紹如何在 Next.js 中有效地使用快取

Next.js 擴充了 fetch API,為您提供快取方面的超能力。使用 cache: 'no-store'cache: 'force-cache' 等簡單的取得選項,您可以輕鬆控制資料快取的時間和方式。

始終保持新鮮快取:'no-store'(相當於unstable_noStore())

每次都想要新鮮數據嗎? cache: 'no-store' 是可以使用的。此獲取選項完全跳過快取並在每次請求時獲取最新資料。當您需要即時準確性時,它是完美的 - 不允許昨天提取的剩餘內容。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

注意:如果您想跳過伺服器元件上的緩存,也可以使用unstable_noStore()。語法稍後可能會更改,因此請堅持使用 cache: 'no-store' 以確保穩定性。

透過快取重複使用資料:'force-cache'(相當於unstable_cache())

另一方面,如果您可以使用快取資料(考慮不經常變更的靜態內容),請使用 cache: 'force-cache'。它將保存回應以供將來使用並跳過冗餘的網路請求。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

注意:unstable_cache() 也會快取數據,但如果您要避免將來發生意外,使用穩定的 cache: 'force-cache' 會更可靠。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

透過重新驗證保持新鮮感

有時快取的資料需要刷新-無論是在特定時間之後還是由事件觸發時。幸運的是,Next.js 允許您透過多種方式重新驗證快取的資料。

使用時間重新驗證:next.revalidate

如果您的資料需要定期刷新(例如每小時或每天),您可以使用提取請求中的 next.revalidate 選項來設定重新驗證期間。它將在您指定的時間後獲取最新數據,同時在其餘時間保留快取內容。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

帶有標籤的按需重新驗證:revalidateTag()

現在,想像一下,您可以告訴 Next.js 在發生重要事件(例如表單提交或新部落格文章上線)時刷新快取資料的特定位元。您可以為快取的資料指派標籤,然後在需要時重新驗證這些標籤。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

這樣,您可以根據需要手動刷新部分緩存,而無需等待下一次計劃的重新驗證。

使用不穩定的方法

如果您是喜歡冒險的人,您也可以直接在伺服器元件上使用 unstable_noStore()unstable_cache() 方法來管理快取行為。請記住,這些「不穩定」是有原因的,因此它們將來可能會發生變化(或者在您閱讀時可能會發生變化)。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

或者,如果您熱衷於緩存,請按以下方法使用 stable_cache():

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

跳過支柱鑽孔

這裡有一個巧妙的技巧:如果您要跨多個組件(例如佈局、頁面和一些內部組件)獲取相同的數據,請不要強調在頂部獲取一次並將其向下傳遞或必須在多個組件上多次請求該資料會導致效能下降。 Next.js 在伺服器渲染期間自動記住獲取請求,這意味著如果您多次獲取相同的數據,它足夠智能,只需訪問網路一次並在多個組件中共享結果。

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

Next.js Caching: Turbocharging Your App with Efficient Data Fetching

總結一下

Next.js 為您提供了有效管理快取所需的所有工具,無論是透過fetch API 選項,例如cache: 'no-store'cache: 'force-cache ',或更具實驗性的unstable_noStore() 和unstable_cache() 方法。加上 next.revalidaterevalidateTag 等重新驗證策略,您就擁有了保持資料新鮮所需的一切。

來源:
Next.js 快取

版本聲明 本文轉載於:https://dev.to/samaghapour/nextjs-caching-turbocharging-your-app-with-efficient-data-fetching-51hb?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用替換指令在GO MOD中解析模塊路徑差異?
    如何使用替換指令在GO MOD中解析模塊路徑差異?
    在使用GO MOD時,在GO MOD 中克服模塊路徑差異時,可能會遇到衝突,其中可能會遇到一個衝突,其中3派對軟件包將另一個帶有導入套件的path package the Imptioned package the Imptioned package the Imported tocted pac...
    程式設計 發佈於2025-05-01
  • 如何避免Go語言切片時的內存洩漏?
    如何避免Go語言切片時的內存洩漏?
    ,a [j:] ...雖然通常有效,但如果使用指針,可能會導致內存洩漏。這是因為原始的備份陣列保持完整,這意味著新切片外部指針引用的任何對象仍然可能佔據內存。 copy(a [i:] 對於k,n:= len(a)-j i,len(a); k
    程式設計 發佈於2025-05-01
  • 為什麼HTML無法打印頁碼及解決方案
    為什麼HTML無法打印頁碼及解決方案
    無法在html頁面上打印頁碼? @page規則在@Media內部和外部都無濟於事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: ...
    程式設計 發佈於2025-05-01
  • 如何連接表格中帶逗號分隔值的列?
    如何連接表格中帶逗號分隔值的列?
    使用逗號分隔值數據庫歸一化對於有效的數據管理至關重要,但是有時,項目可能需要以非正相化形式處理遺產數據。 This article explores a technique for joining two tables with comma-separated values in a given ...
    程式設計 發佈於2025-05-01
  • 如何將來自三個MySQL表的數據組合到新表中?
    如何將來自三個MySQL表的數據組合到新表中?
    mysql:從三個表和列的新表創建新表 答案:為了實現這一目標,您可以利用一個3-way Join。 選擇p。 *,d.content作為年齡 來自人為p的人 加入d.person_id = p.id上的d的詳細信息 加入T.Id = d.detail_id的分類法 其中t.taxonomy ...
    程式設計 發佈於2025-05-01
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-05-01
  • Laravel Blade中使用Bootstrap分頁教程
    Laravel Blade中使用Bootstrap分頁教程
    [2 本教程演示瞭如何在Laravel Blade應用程序中實現Bootstrap分頁。我們將創建一個應用程序,該應用程序填充了一個具有10,000個電影記錄的數據庫,並使用Bootstrap的Styling和Laravel的Blade Templating Engine將它們顯示在分頁列表中。 ...
    程式設計 發佈於2025-05-01
  • After Effects腳本項目與合成指南
    After Effects腳本項目與合成指南
    [2 内容 介绍 应用 项目 文件夹和构图 例子 快速提示 结论 介绍 在本文中,我将使用脚本浏览效果项目和作品的一些基本知识。我将参考脚本指南中一些最有用的部分,并展示一些实用的实践示例。 开始开始。 应用 应用程序 应用程序引用应用程序效果本身的应用程序。...
    程式設計 發佈於2025-05-01
  • 為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    mySQL錯誤#1089:錯誤的前綴鍵錯誤descript [#1089-不正確的前綴鍵在嘗試在表中創建一個prefix鍵時會出現。前綴鍵旨在索引字符串列的特定前綴長度長度,可以更快地搜索這些前綴。 了解prefix keys `這將在整個Movie_ID列上創建標準主鍵。主密鑰對於唯一識...
    程式設計 發佈於2025-05-01
  • 版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    在時間戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源於遺留實現的關注,這些限制需要對當前的_timestamp功能進行特定的實現。 創建表`foo`( `Productid` int(10)unsigned not ...
    程式設計 發佈於2025-05-01
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-05-01
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本編號的替代方法,它是使用以下語法:獲取最新版本:未壓縮)While these legacy URLs still remain in use, it is recommended ...
    程式設計 發佈於2025-05-01
  • 如何配置Pytesseract以使用數字輸出的單位數字識別?
    如何配置Pytesseract以使用數字輸出的單位數字識別?
    Pytesseract OCR具有單位數字識別和僅數字約束 在pytesseract的上下文中,在配置tesseract以識別單位數字和限制單個數字和限制輸出對數字可能會提出質疑。 To address this issue, we delve into the specifics of Te...
    程式設計 發佈於2025-05-01
  • CSS可以根據任何屬性值來定位HTML元素嗎?
    CSS可以根據任何屬性值來定位HTML元素嗎?
    靶向html元素,在CSS 中使用任何屬性值,在CSS中,可以基於特定屬性(如下所示)基於特定屬性的基於特定屬性的emants目標元素: 字體家庭:康斯拉斯(Consolas); } 但是,出現一個常見的問題:元素可以根據任何屬性值而定位嗎?本文探討了此主題。 的目標元素有任何任何屬性值,...
    程式設計 發佈於2025-05-01
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-05-01

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3