使用Redis加速Next.js
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) }) } } |
相關文章
- PHP DIY 系列------框架篇:7. 使用 Redis 加速 Session 讀寫PHP框架RedisSession
- 使用next.js完成從開發到部署JS
- Next.js踩坑入門系列(一)— Hello Next.js!JS
- Next.js + Tailwind CSSJSAICSS
- 推薦使用Next.js或Fastify替代Express.js - JoelJSASTExpress
- 使用 Next.js、LeanCloud 和 Tailwind CSS 建立全棧應用JSCloudAICSS全棧
- 使用 Swoole 加速 Lumen 框架框架
- 使用 LCM 加速生圖
- next.js探索之圖表使用、相容處理、跨域方案JS跨域
- Next.js 入門教程JS
- 如何使用阿里雲映象加速阿里
- 使用Cloudflare Worker加速docker映象CloudDocker
- 使用JDBC時,加速批量insertJDBC
- Laravel 使用 RedisLaravelRedis
- Redis的使用Redis
- SpringBoot使用RedisSpring BootRedis
- PHP使用redisPHPRedis
- Redis基本使用Redis
- Lumen使用RedisRedis
- next.js 踩坑筆記JS筆記
- Next.js入門:Hello WorldJS
- Next.js踩坑記錄JS
- Redis 高階特性 Redis Stream使用Redis
- Redis系列24:Redis使用規範Redis
- 使用映象配置為 Git Clone 加速Git
- 使用 Flutter 加速應用開發Flutter
- 看了就會的next.js路由JS路由
- Sanctum 與 Next.js 的認證JS
- node 之 redis 使用Redis
- Spring-Redis 使用SpringRedis
- Redis 入門使用Redis
- Redis使用場景Redis
- Redis部署與使用Redis
- golang中使用redisGolangRedis
- SpringBoot 使用 Redis GeoSpring BootRedis
- Redis的使用(二)Redis
- Cromwell CMS:使用Next.js重寫的全新WordPress免費開源專案JS
- .Net使用Redis詳解之ServiceStack.RedisRedis