Remix Cache 技能

专家指导如何使用 remix-cache，这是一个为 Remix 应用程序准备的生产就绪的缓存库，具有基于 SSE 的实时失效、过期-同时-再验证、模式匹配和自动 React 再验证功能。当您在 Remix 应用程序中处理缓存、Redis 后端缓存策略、缓存失效（通过键、标签或模式）、实时缓存同步、过期-同时-再验证模式、类型安全的缓存定义、React 钩子自动再验证或性能优化时，可以使用这项技能。

何时使用这项技能

当用户询问以下内容时，使用这项技能：

Remix 应用程序中实现缓存
Redis 后端缓存策略
缓存失效（通过键、标签或模式）
基于 SSE 的实时缓存同步
过期-同时-再验证模式
类型安全的缓存定义
React 钩子自动再验证
缓存性能优化
服务器与无服务器缓存模式
缓存故障的断路器模式

快速参考

基本设置

// app/cache.server.ts
import { createCache } from 'remix-cache/server'

export const cache = createCache({
  redis: { host: process.env.REDIS_HOST, port: 6379 },
  prefix: 'myapp',
})

export const userCache = cache.define({
  name: 'user',
  key: (userId: string) => userId,
  fetch: async (userId: string) => db.user.findUnique({ where: { id: userId } }),
  ttl: 300,
})

在加载器中使用

export async function loader({ params }: LoaderFunctionArgs) {
  const user = await userCache.get(params.userId)
  return json({ user })
}

失效

// 通过键
await cache.invalidate({ key: 'myapp:user:123' })

// 通过标签
await cache.invalidateByTag('product')

// 通过模式
await cache.invalidateByPattern('user:*')

实时 React 再验证

// app/root.tsx
<CacheProvider endpoint="/api/cache-events">
  <Outlet />
</CacheProvider>

// 组件
useCache({ tags: ['user'], debounce: 200 })

详细文档

对于特定主题的全面指导，请参阅：

GETTING_STARTED.md - 安装、设置和第一个缓存定义
API_REFERENCE.md - 所有方法和选项的完整 API 文档
PATTERNS.md - 常见缓存模式和最佳实践
REACT_INTEGRATION.md - SSE 设置和 React 钩子用于实时失效
EXAMPLES.md - 真实世界的例子（电子商务、会话、API 缓存）
TROUBLESHOOTING.md - 常见问题和解决方案
TESTING.md - 测试策略和模式

关键能力

1. 类型安全的缓存定义

完美的 TypeScript 推断缓存键和值。见 API_REFERENCE.md。

2. 高级 TTL 策略

过期-同时-再验证：在获取新鲜数据的同时提供过时数据
滑动窗口：每次访问时重置 TTL
条件 TTL：基于数据的动态 TTL 见 PATTERNS.md。

3. 多级失效

通过键：使特定条目失效
通过标签：使一组相关条目失效
通过模式：使用通配符模式使条目失效
级联：自动依赖失效见 API_REFERENCE.md。

4. 实时同步

SSE 端点：将失效事件流式传输到客户端
React 钩子：在缓存更改时自动再验证
过滤：仅针对特定键/标签/模式再验证见 REACT_INTEGRATION.md。

5. 弹性特性

断路器：当 Redis 失败时优雅降级
请求去重：防止缓存踩踏
错误事件：监控和跟踪故障见 PATTERNS.md。

6. 部署灵活性

服务器模式：两层缓存（本地 LRU + Redis）
无服务器模式：仅 Redis，带版本控制键见 API_REFERENCE.md。

此存储库中的文件结构

remix-cache 库的组织如下：

src/
├── server/           # 服务器端缓存实现
│   ├── cache.ts      # 主缓存类
│   ├── definition.ts # 缓存定义实现
│   ├── sse-handler.ts # SSE 端点生成器
│   ├── local-cache.ts # 内存 LRU 缓存
│   ├── circuit-breaker.ts # 断路器模式
│   └── deduplicator.ts # 请求去重
├── react/            # React 集成
│   ├── provider.tsx  # CacheProvider 组件
│   ├── use-cache.ts  # useCache 钩子
│   └── context.tsx   # React 上下文
├── types/            # TypeScript 类型定义
│   ├── cache.ts
│   ├── definition.ts
│   └── events.ts
└── utils/            # 公用函数
    ├── key-builder.ts     # 缓存键生成
    ├── pattern-match.ts   # 通配符模式匹配
    └── env-detect.ts      # 环境检测

常见工作流

设置新缓存

阅读 GETTING_STARTED.md 了解基本设置
在 app/cache.server.ts 中创建缓存实例
为您的数据类型定义缓存定义
在加载器/操作中使用
设置 SSE 端点以实现实时失效（见 REACT_INTEGRATION.md）
在需要自动再验证的组件中添加 React 钩子

实施缓存失效

确定失效策略（键/标签/模式）
如果需要，向缓存定义添加标签
在操作中调用失效方法
验证是否触发了失效事件
测试 React 组件是否正确再验证

调试缓存问题

查看 TROUBLESHOOTING.md 了解常见问题
启用事件侦听器以监控缓存行为
验证 Redis 连接和配置
检查断路器状态
在浏览器 DevTools 中检查 SSE 连接

编写测试

见 TESTING.md：

单元测试缓存定义
与 Redis 的集成测试
测试中的模拟缓存
测试失效逻辑
测试带有缓存的 React 组件

环境变量

REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=your-password
CACHE_PREFIX=myapp
CACHE_DEFAULT_TTL=300
NODE_ENV=production

实施说明

在帮助用户实施 remix-cache 时：

始终确保类型安全：库提供完美的 TypeScript 推断
考虑部署模式：询问是否为无服务器或基于服务器
计划失效策略：标签比键更灵活
设置适当的 TTL：在新鲜度和性能之间取得平衡
监控错误：始终设置错误事件侦听器
彻底测试：缓存错误可能很微妙，见 TESTING.md
关闭连接：特别是在测试中很重要

获取帮助

对于特定主题：

新手？→ GETTING_STARTED.md
查找 API 详细信息？→ API_REFERENCE.md
需要实施模式？→ PATTERNS.md 和 EXAMPLES.md
设置 React 集成？→ REACT_INTEGRATION.md
遇到问题？→ TROUBLESHOOTING.md
编写测试？→ TESTING.md

版本

这项技能涵盖了 remix-cache v0.1.0，完整实现了第 1-5 阶段：

✅ 核心缓存与 Redis 后端
✅ 类型安全的缓存定义
✅ 过期-同时-再验证
✅ 滑动窗口 TTL
✅ 模式和标签基础失效
✅ 断路器模式
✅ 请求去重
✅ 服务器/无服务器模式
✅ SSE 实时失效
✅ React 钩子自动再验证