Stale-while-revalidate Strategy

// This function simulates retrieving data from a cache
function getFromCache(key) {
    // Implementation of cache retrieval, e.g., using localStorage
    return localStorage.getItem(key);
}

// This function simulates updating the cache with new data
function updateCache(key, value) {
    // Implementation of cache update, e.g., using localStorage
    localStorage.setItem(key, value);
}

// This function fetches the latest data from the server
async function fetchLatestData(url, key) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        updateCache(key, JSON.stringify(data));
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

// Stale-while-revalidate implementation
async function fetchData(url, key) {
    const staleData = getFromCache(key);
    if (staleData) {
        // Respond with stale data immediately
        console.log('Responding with stale data:', JSON.parse(staleData));
        // Fetch latest data in the background for future requests
        fetchLatestData(url, key);
    } else {
        // If no data in cache, wait for fresh data
        await fetchLatestData(url, key);
        return fetchData(url, key); // Retry fetching after cache is updated
    }
}