POC: Cache API

[nicknish]

@h-Benitez13 You mentioned that you've seen an issue in an application where there are large network requests, which results in heavy data processing. This is visibly slowing down the performance of an application you're working on.

A few server-side recommendations come to mind:

1. Cache in a server that sits between you and the database
2. Have your server perform server-side rendering

If you don't have a server to use, you are forced to use client-side APIs:

1. Session Storage / Local Storage (However, it's limited to 5MB)
2. Cache API (maybe with Service Workers)
3. IndexedDB

I haven't worked with Cache API or IndexedDB professionally, but it seemed like possible solutions to your issue if you're constrained to the client.

Here's a POC of how you might use the Cache API.

Let me know if you have time to jump on a call and I'll demo this.

How to use the demo

1. Open the Vercel link below where it says "Visit Preview". This should open a testing version of my website
2. Open DevTools and refresh
3. You should see something like "cache hit" or "cache miss"
4. Refresh the page. If you refresh within 10sec, you should see "cache hit"
5. Click on "Start Here" in the navbar. Wait 10 seconds, then navigate back to the Homepage. You should see "cache miss".

What is happening: The first time you visit the page, we make a network request. This request gets added to the cache, so that if we try to fetch the data again within a specified time period (10 seconds), you'll get the previous data. If we fetch the data again after that period, it will refetch to get fresh data.

In a real-life context, you would cache for longer than 10 seconds, but this is useful for demo purposes. Imagine if we set the cache age to 10 minutes. During those 10 minutes, you can refresh as many times as you want and you won't have to make a huge network request again.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nicknish-web	✅ Ready (Inspect)	Visit Preview	Apr 28, 2023 3:24am