The cache working process is set up incorrectly (or correctly?)

[vordgi]

In case of cache writing errors, it will be impossible to retrieve up-to-date data until the cache is successfully written. Meanwhile, requests for up-to-date data will continue.

Example:

We load a blog. All articles are loaded immediately. At some point, an additional pack of articles is added, but they are not displayed on the service. There are no errors, requests are being made, and the backend returns correct data.

Why? Here's the answer: the data was 1.9MB, but it became more than 2MB. Next.js (for some reason) does not display this error in production.

Repository with the bug - https://github.com/vordgi/next-fetch-cache-bug

A highly simplified caching algorithm:

1. The page is loaded for the first time - data is loaded, we wait for it, and it is written to the cache.
2. On subsequent requests, the cache is returned immediately, and if necessary, up-to-date data is loaded in parallel.
3. When the data is loaded, it is written to the cache.
4. Repeat steps 2-3.

I tried to create a diagram (please don't judge it too harshly, there is no need to go into detail) -

So, if there is an error in the third step, only the second step will be executed, repeatedly returning outdated data, but still making requests for up-to-date data (without a revalidation period, meaning much more frequently).

When repeating in development mode, it gets even more interesting - with a hard refresh (adding the cache-control: no-cache header), freshly loaded data is displayed, and then with a regular refresh, old data is read from the cache since the new data could not be written.

However, if a cache writing error occurs in the first step, only the first step will be repeated, completing the expected process.

Here's how the process can be structured in simplified form:

1. The page is loaded for the first time - data is loaded, we wait for it, and it is written to the cache.
2. On subsequent requests, if the cache has a special flag (see step 3), step 1 is executed, but if the data fails to load, it is read from the cache. If the flag is not present, the cache is returned immediately, and if necessary, up-to-date data is loaded in parallel.
3. When the data is loaded, it is written to the cache. If the data fails to be written to the cache, we mark the old cache with a flag as archived.
4. Repeat steps 2-3.

A more detailed diagram (highlighting changes in orange squares) -

[vordgi]

PR with a solution option - #60130

[vordgi]

Video examples of bug

After the second request, the backend returns large data. "Request number" and "Load data, data length:" were logged from route handler. "Render page" from page segment

Development (2x). In the middle I did force reload.

dev.mp4

Production (2x). I changed revalidation time for fetch to 5s

prod.mp4