skillhub-088-vercel-react-best-practices
wehub-skill-sync
42 行
1.3 KiB
Markdown
42 行
1.3 KiB
Markdown
---
|
||
title: 跨请求 LRU 缓存
|
||
impact: HIGH
|
||
impactDescription: 跨请求缓存
|
||
tags: server, cache, lru, cross-request
|
||
---
|
||
|
||
## 跨请求 LRU 缓存
|
||
|
||
`React.cache()` 仅在单个请求内有效。对于跨顺序请求（用户先点击按钮 A，再点击按钮 B）共享的数据，请使用 LRU 缓存。
|
||
|
||
**实现方式：**
|
||
|
||
```typescript
|
||
import { LRUCache } from 'lru-cache'
|
||
|
||
const cache = new LRUCache<string, any>({
|
||
max: 1000,
|
||
ttl: 5 * 60 * 1000 // 5 分钟
|
||
})
|
||
|
||
export async function getUser(id: string) {
|
||
const cached = cache.get(id)
|
||
if (cached) return cached
|
||
|
||
const user = await db.user.findUnique({ where: { id } })
|
||
cache.set(id, user)
|
||
return user
|
||
}
|
||
|
||
// 请求 1：数据库查询，结果被缓存
|
||
// 请求 2：缓存命中，无需数据库查询
|
||
```
|
||
|
||
当用户连续操作在数秒内命中多个端点、且需要相同数据时使用。
|
||
|
||
**配合 Vercel 的 [Fluid Compute](https://vercel.com/docs/fluid-compute)：** LRU 缓存尤为有效，因为多个并发请求可以共享同一函数实例及其缓存。这意味着缓存可以在请求之间持久存在，无需依赖 Redis 等外部存储。
|
||
|
||
**在传统 Serverless 环境中：** 每次调用都在隔离环境中运行，因此跨进程缓存请考虑使用 Redis。
|
||
|
||
参考：https://github.com/isaacs/node-lru-cache
|