Optimizing Data Fetching and Caching Strategies for Frontend Applications

Problem Description
Data fetching and caching are core aspects of frontend performance optimization. Improper data requests can lead to network congestion, redundant loading, extended blank screen times, and other issues. We need to design intelligent data fetching strategies combined with multi-level caching mechanisms to reduce unnecessary network requests, improve data loading speed, and enhance user experience.

Solution Process

1. Analyze Data Characteristics and Usage Scenarios
First, classify different types of data:

• Static data: Configuration information, city lists, etc. (low update frequency)
• Semi-static data: Product information, user profiles, etc. (moderate updates)
• Dynamic data: Real-time messages, stock prices, etc. (high-frequency updates)

Key Idea: Formulate different caching strategies based on data update frequency and importance.

2. Browser-Level Caching Strategy
Utilize HTTP caching mechanisms to reduce network requests:

// Set appropriate Cache-Control headers
// Static resources: Long-term caching (e.g., 1 year)
Cache-Control: public, max-age=31536000, immutable

// Semi-static data: Short-term caching (e.g., 10 minutes)
Cache-Control: max-age=600

// Dynamic data: No caching or short-term caching
Cache-Control: no-cache  // or max-age=0

Practical Tip: Add content hash to static resources to achieve "permanent cache + timely updates".

3. Application-Level Memory Cache Implementation
Establish a cache pool in memory to avoid duplicate requests:

class DataCache {
  constructor() {
    this.cache = new Map();
    this.maxSize = 100; // Prevent memory leaks
  }
  
  set(key, data, ttl = 300000) { // Default 5 minutes
    if (this.cache.size >= this.maxSize) {
      this.evictOldest();
    }
    
    this.cache.set(key, {
      data,
      expireTime: Date.now() + ttl,
      lastAccess: Date.now()
    });
  }
  
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    // Check expiration
    if (Date.now() > item.expireTime) {
      this.cache.delete(key);
      return null;
    }
    
    item.lastAccess = Date.now();
    return item.data;
  }
  
  evictOldest() {
    let oldestKey = null;
    let oldestTime = Infinity;
    
    for (const [key, value] of this.cache) {
      if (value.lastAccess < oldestTime) {
        oldestTime = value.lastAccess;
        oldestKey = key;
      }
    }
    
    if (oldestKey) this.cache.delete(oldestKey);
  }
}

4. Request Deduplication and Race Condition Handling
Prevent concurrent sending of identical requests:

class RequestDeduplicator {
  constructor() {
    this.pendingRequests = new Map();
  }
  
  async dedupe(key, requestFn) {
    // If the same request is already in progress, return its Promise
    if (this.pendingRequests.has(key)) {
      return this.pendingRequests.get(key);
    }
    
    const requestPromise = requestFn().finally(() => {
      this.pendingRequests.delete(key);
    });
    
    this.pendingRequests.set(key, requestPromise);
    return requestPromise;
  }
}

// Usage example
const deduplicator = new RequestDeduplicator();

async function fetchUserData(userId) {
  return deduplicator.dedupe(`user-${userId}`, async () => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  });
}

5. Layered Caching Strategy Design
Build a multi-level caching system, accessed by priority:

1. Memory Cache: Fastest, but lost on page refresh
2. SessionStorage: Tab-level persistence
3. IndexedDB: Large-capacity structured storage
4. HTTP Cache: Network-level caching
5. Server Response: Ultimate data source

class LayeredCache {
  async get(key) {
    // 1. Check memory cache
    let data = this.memoryCache.get(key);
    if (data) return data;
    
    // 2. Check SessionStorage
    data = await this.getFromSessionStorage(key);
    if (data) {
      this.memoryCache.set(key, data); // Populate memory cache
      return data;
    }
    
    // 3. Check IndexedDB (for large data)
    data = await this.getFromIndexedDB(key);
    if (data) {
      this.memoryCache.set(key, data);
      return data;
    }
    
    return null;
  }
}

6. Preloading and Precaching Strategies
Predictively load data based on user behavior:

// Route-level preloading
router.beforeEach((to, from, next) => {
  // Preload data required for the target page
  if (to.meta.requiredData) {
    preloadData(to.meta.requiredData);
  }
  next();
});

// Interaction-based preloading
function setupPredictiveLoading() {
  // Preload on hover
  document.querySelector('.user-profile-link').addEventListener('mouseenter', () => {
    preloadUserData();
  });
  
  // Viewport-based preloading
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        preloadComponentData(entry.target.dataset.key);
      }
    });
  });
}

7. Cache Invalidation and Update Strategies
Design reasonable cache invalidation mechanisms:

• Time-based invalidation: TTL (Time to Live)
• Event-based invalidation: Actively clear related caches upon data updates
• Version-based invalidation: Full update when data version changes

// Event-driven cache invalidation
class CacheManager {
  constructor() {
    this.eventHandlers = new Map();
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    // When user info updates, invalidate all related caches
    eventBus.on('user-updated', (userId) => {
      this.invalidate(`user-${userId}`);
      this.invalidate(`user-profile-${userId}`);
    });
    
    // Product info update
    eventBus.on('product-updated', (productId) => {
      this.invalidate(`product-${productId}`);
      this.invalidate('product-list'); // Invalidate list cache
    });
  }
  
  invalidate(pattern) {
    for (const key of this.cache.keys()) {
      if (key.includes(pattern)) {
        this.cache.delete(key);
      }
    }
  }
}

8. Offline-First Strategy
Implement offline-capable user experience:

// Use Cache API for offline caching
async function cacheFirstWithUpdate(request) {
  const cachedResponse = await caches.match(request);
  
  if (cachedResponse) {
    // Update cache in background
    fetch(request).then(response => {
      if (response.ok) {
        caches.open('data-v1').then(cache => {
          cache.put(request, response);
        });
      }
    });
    
    return cachedResponse;
  }
  
  return fetch(request);
}

Summary
Excellent data fetching and caching strategies require comprehensive consideration of data characteristics, user experience, and technical implementation. By combining multi-level caching, request optimization, intelligent preloading, and other techniques, the performance of frontend applications can be significantly improved. The key is to find the optimal balance between cache freshness and performance.