mono/packages/ui/docs/caching.md

Caching Strategy

1. Server-Side Caching (The Fast Layer)

Goal: Reduce DB load by caching public reads (Feeds, Profiles).

Cache Adapter Interface

We will use a platform-agnostic interface to support both Memory (Dev/Single-Node) and Redis (Prod/Cluster).

// server/src/commons/cache/types.ts
export interface CacheAdapter {
  get<T>(key: string): Promise<T | null>;
  set<T>(key: string, value: T, ttl?: number): Promise<void>;
  del(key: string): Promise<void>;
  flush(pattern?: string): Promise<void>;
}

Implementations

• MemoryCache: Use lru-cache. Default for local dev.
• RedisCache: Use ioredis. Enabled if REDIS_URL is present.

usage in ServingProduct

• Feed: Cache home-feed for 60 seconds (Target: server/src/products/serving/index.ts).
• Profile: Cache profile-{id} for 5 minutes (Target: server/src/products/serving/index.ts). Invalidate on profile update webhook.

---

2. Client-Side Caching (The Smart Layer)

Goal: Eliminate "Double Fetching" and provide instant navigation (Back/Forward).

TanStack Query (React Query)

• Config: Set global staleTime to 5 minutes for "Content" (Posts, Pictures) in src/App.tsx.
• Prefetching:
  • On hover of a User Link, queryClient.prefetchQuery(['profile', id]).
  • On hover of a Post Card, queryClient.prefetchQuery(['post', id]).
• Hydration:
  • Use HydrationBoundary to ingest window.__INITIAL_STATE__ served by the optimized Server Injection in src/App.tsx.

Optimistic Updates

• Likes: Update UI immediately. Rollback on error in src/components/LikeButton.tsx (or relevant component).
• Edits: Update Local Cache immediately. Background sync.

---

3. CDN & Static Assets

• Ensure Supabase Storage bucket is behind a CDN (Cloudflare or Supabase built-in).
• Thumbnails: Use the Resizing Proxy (/api/images/cache/...) which natively caches processed images on disk/nginx.