使用Redis加速Next.js

banq發表於2021-05-23
RedisJS

Next.js是一個非常成功的Web框架，它將伺服器端渲染和靜態站點生成結合在一起。透過CDN快取，伺服器端渲染SSG可以加快您的網站速度，同時SSR可以幫助您處理SEO和動態資料。
伺服器端渲染是一項出色的功能，可幫助您編寫全棧應用程式。但是，如果您不小心，則很容易影響Next.js網站的效能。在此部落格文章中，我將解釋如何利用Redis加快Next.js API呼叫的速度。在此之前，我將簡要地介紹一種提高效能的簡單方法。

SWR是一個非常智慧的資料提取庫。它使用HTTP RFC 5861描述的HTTP快取無效策略（失效時重新驗證）。當您使用SWR呼叫API時，它會立即返回快取的資料，但會非同步獲取當前資料並更新您的UI。您還可以根據您對陳舊性的容忍度設定refreshInterval。

{ data: user } = useSWR(‘/api/user’, { refreshInterval: 2000 })


在上面的程式碼中，使用者API將每2秒重新整理一次。
SWR非常簡單有效。但是在某些情況下，您將需要伺服器端快取：
  • 客戶端快取提高了客戶端的效能。但是，如果客戶端數量很多，則伺服器端資源可能會承受高負載，這最終也會影響客戶端效能。
  • 如果您使用具有配額的外部API，則需要在伺服器端控制API的使用。否則，太多的客戶端將迅速使用該API。
  • 如果您使用動態輸入在伺服器端計算，獲取或處理了資源，則客戶端快取將不是很有用。

 

示例專案：Covid Tracker：
在此專案中，我們將使用Javier Aviles的Covid API並找到案例數最多的前10個國家/地區。檢查網站和原始碼。
我們將使用Redis快取來自Covid API的響應，因此：

  • 響應將更快。如果您訪問該網站，則會看到呼叫Covid API的時間為數百毫秒，而從Redis進行的獲取則為1-2毫秒。
  • 我們不會因太多請求而壓倒Covid API。

 
API程式碼
API程式碼首先檢查我們是否在Redis中快取了API結果。否則，我們將從Covid API中獲取所有國家/地區列表，並按當日的病例數對它們進行排序，然後將前10名儲存到Redis。儲存到Redis時，我們設定“ EX” 60引數，這意味著Redis將在60秒內刪除該條目。

import Redis from 'ioredis'

let redis = new Redis(process.env.REDIS_URL)

export default async (req, res) => {
   let start = Date.now();
   let cache = await redis.get("cache")
   cache = JSON.parse(cache)
   let result = {}
   if (cache) {
       console.log("loading from cache")
       result.data = cache
       result.type = "redis"
       result.latency = Date.now() - start;
       return res.status(200).json(result)
   } else {
       console.log("loading from api")
       start = Date.now();
       return fetch('https://coronavirus-19-api.herokuapp.com/countries')
           .then(r => r.json())
           .then(data => {
               data.sort(function (a, b) {
                   return b.todayCases - a.todayCases;
               });
               result.data = data.splice(1, 11)
               result.type = "api"
               result.latency = Date.now() - start;
               redis.set("cache", JSON.stringify(result.data), "EX", 60)
               return res.status(200).json(result)
           })
   }
}

 

相關文章