[Cache Components] Is Next.js's bfCache a back/forward cache?

[koichik]

The docs says:

When the cacheComponents flag is enabled, Next.js uses React's component to preserve component state during client-side navigation.

Internally, this feature seems to be called bfCache. However, I believe the cache behavior differs from the browser's bfCache.

Here is the demo repository:
https://github.com/koichik/bfcache-demo

1. run pnpm dev (or pnpm build and pnpm start).
2. open http://localhost:3000/.

Browser's bfCache

3. click "MPA Counter".
4. click "+" button, you'll see "Count: 1".
5. click "MPA Blank".
6. click "MPA Counter", you'll see "Count: 0".
7. click "+" button twice, you'll see "Count: 2".
8. browser back twice, you'll see "Count: 1".
9. click "+" button twice, you'll see "Count: 3".
10. browser forward twice, you'll see "Count: 2".

This is the back/forward cache behavior.

Next.js's bfCache

11. click "SPA Couter.
12. click "+" button, you'll see "Count: 1".
13. click "SPA Blank".
14. click "SPA Counter", you'll see "Count: 1" (unexpected).
15. click "+", you'll see "Count: 2".
16. browser back twice, you'll see "Count: 2" (unexpected).
17. click "+", you'll see "Count: 3".
18. browser forward twice, you'll see "Count: 3" (unexpected).

This behavior differs from the browser's bfCache.

---

The bfCache should be associated with history entries. In other words, the cache key should be the position of the entry in the history (e.g. window.navigation.currentEntry.key). However, Next.js's bfCache seems to just use the URL as a key. Thus, I don't think this can be called bfCache.

Do you have a plan to implement behavior similar to the browser's (i.e. real) bfCache?