K.
@metrobueller.com
🇸🇴 //🎶Mick Jenkins // 💻deck.gl
I post about things I'm learning
I post about things I'm learning
Version I have now (with no stale-while-revalidate functionality)
November 3, 2024 at 6:22 PM
Version I have now (with no stale-while-revalidate functionality)
I think this could be simplified a ton by allowing developers to modify the request that is made to your server with `serverLoader()` in the `clientLoader`. The browser could handle ETag validation!
November 3, 2024 at 6:20 PM
I think this could be simplified a ton by allowing developers to modify the request that is made to your server with `serverLoader()` in the `clientLoader`. The browser could handle ETag validation!
![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();
}
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:3427gqwycoamlui262wmqr5n/bafkreiet3in5du525yrcivolcyfkiyn5zw37zimtwr47qh6jyztvud2auy@jpeg)