Skip to content

CACHING_SYSTEM.md

Latest commit

 

History

History
152 lines (117 loc) · 6.21 KB

CACHING_SYSTEM.md

File metadata and controls

152 lines (117 loc) · 6.21 KB

Comprehensive Caching System for Next.js Application

This document outlines the caching system implemented for high-traffic components in our Next.js application.

1. Notifications System - Client-side Caching

Implementation

  • SWR + localStorage: Implemented a hybrid caching approach using SWR for data fetching with stale-while-revalidate pattern and localStorage for offline access.
  • Cache Invalidation: Automatic and manual cache invalidation mechanisms to ensure data consistency.
  • Optimistic Updates: Immediate UI updates with background synchronization for better user experience.

Files

  • lib/cache/notificationsCache.ts: Core caching utilities for notifications
  • lib/hooks/useNotifications.ts: Custom hook for notifications data with caching
  • lib/hooks/useUnreadNotifications.ts: Custom hook for unread notifications count
  • components/NotificationsMain.tsx: Updated component using the caching system

Benefits

  • Reduced API Calls: Minimizes redundant API calls by using cached data when available
  • Offline Support: Basic functionality when offline through localStorage
  • Improved Performance: Faster UI rendering with cached data
  • Better UX: Optimistic updates for immediate feedback

2. Real-time Chat Functionality - Socket Connection Management

Implementation

  • IndexedDB for Message Caching: Persistent storage for chat messages using IndexedDB
  • Socket Connection Manager: Robust socket connection handling with reconnection logic
  • Offline Message Queue: Store and retry mechanism for messages sent while offline
  • Fallback Mechanisms: Redundant API calls for critical operations

Files

  • lib/cache/chatCache.ts: IndexedDB-based cache for chat messages and metadata
  • lib/socket/socketManager.ts: Socket connection management with reconnection logic
  • lib/hooks/useChat.ts: Custom hook for product chat functionality
  • lib/hooks/useSupportChat.ts: Custom hook for support chat functionality

Benefits

  • Connection Resilience: Robust handling of network interruptions
  • Offline Support: Queue messages when offline for later delivery
  • Reduced Data Transfer: Only fetch new messages instead of entire chat history
  • Improved Reliability: Fallback mechanisms ensure message delivery

3. Analytics Data - Server-side Caching with Redis

Implementation

  • Redis Caching: Server-side caching of analytics data using Redis
  • Time-based Invalidation: Automatic cache expiration based on data type
  • Selective Invalidation: Targeted cache invalidation when data changes
  • Client-side Cache: Additional browser-side caching for frequently accessed data

Files

  • lib/redis/redisClient.ts: Redis client configuration
  • lib/redis/analyticsCache.ts: Redis-based caching utilities for analytics
  • app/api/user/analytics/route.ts: API route with Redis caching
  • app/api/ads/[id]/analytics/route.ts: Ad analytics with cache invalidation
  • lib/hooks/useAnalytics.ts: Custom hook with client-side caching

Benefits

  • Reduced Database Load: Minimizes expensive analytics queries
  • Faster API Responses: Pre-computed analytics data served from cache
  • Scalability: Better handling of traffic spikes with cached responses
  • Real-time Updates: Selective cache invalidation ensures fresh data

Technical Benefits

Performance Improvements

  • Faster Page Loads: Initial page loads are significantly faster with cached data
  • Reduced Time-to-Interactive: UI becomes interactive more quickly
  • Smoother User Experience: Less waiting for data fetching operations

Reduced Server Load

  • Fewer Database Queries: Cached data reduces the need for database access
  • Lower API Traffic: Reduced number of API calls through client-side caching
  • More Efficient Resource Usage: Server resources are used more efficiently

Enhanced Reliability

  • Graceful Degradation: Application remains functional during network issues
  • Consistent Experience: Users experience fewer disruptions during connectivity problems
  • Error Recovery: Automatic retry mechanisms for failed operations

Scalability Benefits

  • Better Peak Handling: System can handle traffic spikes more effectively
  • Reduced Infrastructure Needs: Lower resource requirements for the same user load
  • Cost Efficiency: Reduced server costs through more efficient resource utilization

Integration with Next.js Architecture

API Routes

  • Server-side caching in API routes using Redis
  • Middleware for cache control and invalidation

React Hooks

  • Custom hooks for data fetching with caching logic
  • Integration with SWR for stale-while-revalidate pattern

Client Components

  • Components updated to use cached data
  • Optimistic UI updates for better user experience

Data Consistency Mechanisms

Cache Invalidation Strategies

  • Time-based Expiration: Automatic expiration of cached data
  • Event-based Invalidation: Cache invalidation on specific events (e.g., new message)
  • Selective Updates: Partial cache updates for changed data

Synchronization

  • Background synchronization of cached data with server
  • Conflict resolution for concurrent updates

Error Handling and Fallbacks

Network Error Handling

  • Graceful degradation during network issues
  • Automatic retry mechanisms with exponential backoff

Cache Miss Handling

  • Fallback to API calls when cache is empty or invalid
  • Loading states during cache misses

Data Validation

  • Validation of cached data before use
  • Refresh mechanisms for stale data

Configuration and Dependencies

Added Dependencies

{
  "@upstash/redis": "^1.20.6",
  "idb": "^7.1.1",
  "swr": "^2.2.0"
}

Configuration Changes

  • Redis connection configuration in environment variables
  • Cache expiration times configurable per data type

Future Enhancements

Potential Improvements

  • Service Worker integration for more robust offline support
  • Shared worker for cross-tab synchronization
  • More sophisticated conflict resolution strategies
  • Analytics for cache hit/miss rates

Maintenance Considerations

  • Regular monitoring of cache size and performance
  • Periodic review of cache invalidation strategies
  • Adjustment of cache expiration times based on usage patterns