New cacheComponents back/forward cache breaks Algolia InstantSearch

[stianmartinsen]

Summary

Hi!

I'm sure this is mostly an issue with InstantSearch and not Next, but it might be helpful to show how the new bfcache that is automatically enabled when running Next16 with cacheComponents might cause issues with third party client components.

Algolia's InstantSearch for example seems to set and rely on some internal state (e. g isFirstRender) when mounting. The search in this example work on the first navigation, but if you go back to the frontpage (using the <Link> in the top), and back again to the search – it's no longer working. Either nothing is shown on the screen, or the filters/search bar isn't working.

Demo: https://instantsearch-cache-components.vercel.app
Repo: https://github.com/stianmartinsen/instantsearch-cache-components

Until Algolia makes react-instantsearch-next work properly with cacheComponents, or Next allows us to opt out of bfcache for specific routes, I would love some input on how to best force a complete re-mount of the entire thing.

Additional information

No response

Example

No response

[icyJoseph]

Looks like this cleanup function: https://github.com/algolia/instantsearch/blob/60c5bc5812245d9758bac24dcf54b034ac19c3c9/packages/react-instantsearch-core/src/lib/useInstantSearchApi.ts#L228C1-L230C10

        function cleanup() {
          search.dispose();
        }

Needs to either:

Clear up the timer that ultimately prevents a new InstantSearch from being instantiated given Activity preserving various things.

This means that navigating away and back, shows a new Instance, aka previous search queries are gone, start fresh.

        function cleanup() {
          search.dispose();
          cleanupTimerRef.current = null;
        }

Or, not clean up if commanded with, for example, your future option:

        function cleanup() {
           // or any other flag I guess
           if (search.future.preserveSharedStateOnUnmount) return
           search.dispose();
        }

This allows us to return to the same state on navigating back to the search page. Maybe should also clean up the timer here.

Screen.Recording.2025-11-03.at.13.18.56.mov

I managed once, to trigger an error on the SearchBox, when navigating back and forth, likely more changes are needed.

For the time being you can use a different key generated above the InstantSearch component, unfortunately techniques to generate a key and re-render can be expensive... but for the time being it would do the trick, creating a new whole InstantSearch component instance.

[RobinGiel]

this is why it's happening Nextjs Docs navigation with cache component

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

Rather than unmounting the previous route when you navigate away, Next.js sets the Activity mode to "hidden". This means:

Component state is preserved when navigating between routes
When you navigate back, the previous route reappears with its state intact
Effects are cleaned up when a route is hidden, and recreated when it becomes visible again
This behavior improves the navigation experience by maintaining UI state (form inputs, or expanded sections) when users navigate back and forth between routes.