[react-instantsearch-nextjs] Next.js v16 App Router with Cache Components enabled breaks instantsearch

[jameskirkby]

🐛 Current behavior

In Next.js v16 when using App Router, if Cache Components is enabled, instantsearch only works on the initial page render. If you navigate within the app to another page, then back to the instantsearch page, nothing renders.

🔍 Steps to reproduce

1. Checkout https://github.com/algolia/instantsearch/tree/master/examples/react/next-app-router
2. Create next.config.ts and add the following:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

3. Remove export const dynamic = 'force-dynamic'; from all pages
4. Add a view page to navigate to, such as app/view/[hitId]/page.tsx:

import Link from "next/link";

export default async function View({
  params,
}: {
  params: Promise<{ hitId: string }>;
}) {
  const { hitId } = await params;
  return (
    <div>
      <Link href="/">Back to search</Link>
      <div>View {hitId}</div>
    </div>
  );
}

5. Update the <Hit /> component to link to the view page:

// components/Hit.tsx
import { Hit as AlgoliaHit } from "instantsearch.js";
import React from "react";
import { Highlight } from "react-instantsearch";
import Link from "next/link";

type HitProps = {
  hit: AlgoliaHit<{
    name: string;
    price: number;
  }>;
};

export function Hit({ hit }: HitProps) {
  return (
    <Link href={`/view/${hit.objectID}`}>
      <Highlight hit={hit} attribute="name" />
      <span className="Hit-price">${hit.price}</span>
    </Link>
  );
}

6. Run the app with next dev
7. From the results page, click a result. This will take you to the view page.
8. Use your browser back to go back to the results page (or click the "Back to search" link)
9. Instantsearch does not render

Live reproduction

https://codesandbox.io/p/github/jameskirkby/instantsearch-next-app-router-cache-components/main
https://github.com/jameskirkby/instantsearch-next-app-router-cache-components

💭 Expected behavior

When returning to the results page, instantsearch should render the results.

Package version

react-instantsearch-nextjs 1.2.2

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[RobinGiel]

vercel/next.js#85720

vercel/next.js#85720 (comment)