remix-cache
Implement Redis Caching in Remix
Remix applications often suffer from repeated database queries that slow down response times. This skill provides expert guidance on implementing type-safe Redis caching with real-time invalidation, stale-while-revalidate patterns, and automatic React revalidation.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "remix-cache". How do I set up caching for my product listings?
Erwartetes Ergebnis:
- Here is a complete setup for caching product listings:
- 1. First, create a cache definition:
- ```typescript
- // 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 productCache = cache.define({
- name: "products",
- key: (category: string) => category,
- fetch: async (category: string) => {
- return db.product.findMany({ where: { category } })
- },
- ttl: 300, // 5 minutes
- })
- ```
- 2. Use in your loader:
- ```typescript
- export async function loader({ params }: LoaderFunctionArgs) {
- const products = await productCache.get(params.category)
- return json({ products })
- }
- ```
Verwendung von "remix-cache". How do I invalidate cache when products are updated?
Erwartetes Ergebnis:
- Here are three ways to invalidate your product cache:
- **By Tag:**
- ```typescript
- await cache.invalidateByTag("products")
- ```
- **By Pattern:**
- ```typescript
- await cache.invalidateByPattern("products:*")
- ```
- **By Key:**
- ```typescript
- await cache.invalidate({ key: "myapp:products:electronics" })
- ```
Sicherheitsaudit
Niedriges RisikoDocumentation-only skill containing markdown files with code examples. All 946 static findings are false positives from documentation code blocks. No executable code or malicious patterns present. Safe for marketplace publication.
Qualitätsbewertung
Was du bauen kannst
Add Caching to Remix Loaders
Reduce database load and improve response times by caching loader results with configurable TTL and automatic invalidation.
Real-Time Dashboard Updates
Implement live data updates using SSE-based cache invalidation so dashboards always show fresh data without manual refresh.
API Response Optimization
Cache expensive API responses with stale-while-revalidate patterns to maintain fast response times even during data refreshes.
Probiere diese Prompts
How do I set up redis caching in my Remix application using remix-cache? Show me the basic configuration and how to create a cache for my user data loader.
I need to invalidate my cache when user profiles are updated. Show me how to use tag-based and pattern-based invalidation with remix-cache.
How do I set up SSE-based real-time cache invalidation so my React components automatically update when cached data changes?
Explain the difference between stale-while-revalidate, sliding window, and conditional TTL strategies. When should I use each one?
Bewährte Verfahren
- Use tag-based invalidation for related data changes (e.g., invalidate "products" tag when any product is updated)
- Implement stale-while-revalidate for high-traffic APIs to ensure zero latency during cache refreshes
- Configure circuit breakers to prevent cascade failures when Redis becomes unavailable
Vermeiden
- Avoid using very long TTLs without proper invalidation - stale data frustrates users
- Do not cache user-specific sensitive data without proper access controls
- Avoid caching entire page responses when individual component caching would be more effective