K.

@metrobueller.com

64 Followers 125 Following

🇸🇴 //🎶Mick Jenkins // 💻deck.gl I post about things I'm learning

Code sample illustrating a potential client side cache implementation in Remix. Code to follow: export async function withClientCache<T, S extends StoreKey>({ store, cacheKey, ttl, serverLoader, request, params, }: WithClientCacheOptions<T, S>) { try { let key = typeof cacheKey === "function" ? cacheKey(params) : cacheKey; let cached = await cacheManager[store].get(key); if (cached) { let age = Date.now() - cached.timestamp; let isExpired = age >= ttl; if (!isExpired) return cached.data; if (cached.eTag) { let versionCheck = await fetch(request.url, { method: "HEAD", headers: { "If-None-Match": cached.eTag, }, }); if (versionCheck.status === 304) { await cacheManager[store].set(key, { data: { ...cached } as any, timestamp: Date.now(), eTag: cached.eTag, }); return cached.data; } } } let freshData = await serverLoader(); await cacheManager[store].set(key, { data: { ...freshData }, timestamp: Date.now(), eTag: freshData.eTag, }); return freshData; } catch (error) { console.error("Cache error:", error); return serverLoader(); } }