# 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).

```typescript
// 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`](../server/src/products/serving/index.ts)).
- **Profile**: Cache `profile-{id}` for 5 minutes (Target: [`server/src/products/serving/index.ts`](../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`](../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`](../src/App.tsx).

### Optimistic Updates
- [ ] **Likes**: Update UI immediately. Rollback on error in [`src/components/LikeButton.tsx`](../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.