Is this pattern possible with htmx?

[frederikhors]

I'm trying htmx for the first time these days after YEARS of multiple JS frameworks only for SAAS apps.

The idea is AMAZING: CONGRATULATIONS!

Combining htmx with service-worker I achieved results almost (almost) comparable to those I had using SPA with cache (using for example tanstack/query or urql or apollo).

There is only one problem in the example project that I am preparing and that will serve as a demo to make the team decide on adopting htmx:

Let's say I ask the server for a GET /todos and the server returns a list of todos as an HTML fragment.

Good.

Now let's imagine a poor network latency because the smartphone is in a subway, a rural road or something like that.

If I click on the first item of the list the browser starts to load and nothing happens until TIMEOUT or until THE INTERNET COMES BACK.

With the SPA this issue is "fixed" because the JSON I get from the server - containing the todos list - is saved in memory (or persisted in the browser) and when I click on the first item of the list that item is already in memory and I can choose to stale-while-revalidate show that item.

Is there a similar pattern using htmx?

I'm thinking about starting a background call for each element on the list filling up my service-worker cache, but I think this is wasteful both for my server and for my users.

What do you think?