50 lines
2.2 KiB
Markdown
50 lines
2.2 KiB
Markdown
|
|
# 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.
|