A type-safe, Redis-backed caching library for Remix applications with SSE-based real-time invalidation, stale-while-revalidate, pattern matching, and automatic React revalidation. Use when working with Remix caching, Redis, cache invalidation, implementing caching strategies, or real-time data synchronization in Remix apps.
Expert guidance for using remix-cache, a production-ready caching library for Remix applications.
Use this skill when the user asks about:
// 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 })
}
// By key
await cache.invalidate({ key: 'myapp:user:123' })
// By tag
await cache.invalidateByTag('product')
// By pattern
await cache.invalidateByPattern('user:*')
// app/root.tsx
<CacheProvider endpoint="/api/cache-events">
<Outlet />
</CacheProvider>
// Component
useCache({ tags: ['user'], debounce: 200 })
For comprehensive guidance on specific topics, see:
Perfect TypeScript inference for cache keys and values. See API_REFERENCE.md.
The remix-cache library is organized as:
src/
├── server/ # Server-side cache implementation
│ ├── cache.ts # Main cache class
│ ├── definition.ts # Cache definition implementation
│ ├── sse-handler.ts # SSE endpoint generator
│ ├── local-cache.ts # In-memory LRU cache
│ ├── circuit-breaker.ts # Circuit breaker pattern
│ └── deduplicator.ts # Request deduplication
├── react/ # React integration
│ ├── provider.tsx # CacheProvider component
│ ├── use-cache.ts # useCache hook
│ └── context.tsx # React context
├── types/ # TypeScript type definitions
│ ├── cache.ts
│ ├── definition.ts
│ └── events.ts
└── utils/ # Utility functions
├── key-builder.ts # Cache key generation
├── pattern-match.ts # Glob pattern matching
└── env-detect.ts # Environment detection
app/cache.server.tsSee TESTING.md for:
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=your-password
CACHE_PREFIX=myapp
CACHE_DEFAULT_TTL=300
NODE_ENV=production
When helping users implement remix-cache:
For specific topics:
This skill covers remix-cache v0.1.0 with complete implementation of Phases 1-5: