fix(next-app-router): do not use SSR context for CSR

packages/react-instantsearch-nextjs/src/InstantSearchNext.tsx

@@ -1,5 +1,5 @@
 import { safelyRunOnBrowser } from 'instantsearch.js/es/lib/utils';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   InstantSearch,
   InstantSearchRSCContext,
@@ -49,21 +49,6 @@ export function InstantSearchNext<
   const isMounting = useRef(true);
   const isServer = typeof window === 'undefined';
 
-  const hasRouteChanged = useMemo(() => {
-    // On server, always return false
-    if (isServer) {
-      return false;
-    }
-
-    // On client, route has changed if initialResults have been cleaned up
-    const hasInitialResults = window[InstantSearchInitialResults] !== undefined;
-    return !hasInitialResults;
-  }, [isServer]);
-
-  // We only want to trigger a search from a server environment
-  // or if a Next.js route change has happened on the client
-  const shouldTriggerSearch = isServer || hasRouteChanged;
-
   useEffect(() => {
     isMounting.current = false;
     return () => {
@@ -80,26 +65,44 @@ export function InstantSearchNext<
 
   const routing = useInstantSearchRouting(passedRouting, isMounting);
 
-  const promiseRef = useRef<PromiseWithState<void> | null>(null);
-
-  const initialResults = safelyRunOnBrowser(
-    () => window[InstantSearchInitialResults]
-  );
-
   warn(
     false,
     `InstantSearchNext relies on experimental APIs and may break in the future.
 This message will only be displayed in development mode.`
   );
 
+  return (
+    <ServerOrHydrationProvider isServer={isServer}>
+      <InstantSearch {...instantSearchProps} routing={routing!}>
+        {isServer && <InitializePromise nonce={nonce} />}
+        {children}
+        {isServer && <TriggerSearch />}
+      </InstantSearch>
+    </ServerOrHydrationProvider>
+  );
+}
+
+function ServerOrHydrationProvider({
+  isServer,
+  children,
+}: {
+  isServer: boolean;
+  children: React.ReactNode;
+}) {
+  const promiseRef = useRef<PromiseWithState<void> | null>(null);
+  const initialResults = safelyRunOnBrowser(
+    () => window[InstantSearchInitialResults]
+  );
+
+  // If we're not on the server and we don't need to hydrate, we don't need SSR context
+  if (!isServer && !initialResults) {
+    return children;
+  }
+
   return (
     <InstantSearchRSCContext.Provider value={promiseRef}>
       <InstantSearchSSRProvider initialResults={initialResults}>
-        <InstantSearch {...instantSearchProps} routing={routing!}>
-          {shouldTriggerSearch && <InitializePromise nonce={nonce} />}
-          {children}
-          {shouldTriggerSearch && <TriggerSearch />}
-        </InstantSearch>
+        {children}
       </InstantSearchSSRProvider>
     </InstantSearchRSCContext.Provider>
   );

packages/react-instantsearch-nextjs/src/__tests__/InstantSearchNext.test.tsx

@@ -4,9 +4,9 @@
 
 import { createSearchClient } from '@instantsearch/mocks';
 import { wait } from '@instantsearch/testutils';
-import { act, render } from '@testing-library/react';
-import React from 'react';
-import { SearchBox } from 'react-instantsearch';
+import { act, render, screen } from '@testing-library/react';
+import React, { useContext } from 'react';
+import { InstantSearchRSCContext, SearchBox } from 'react-instantsearch';
 
 import { InstantSearchNext } from '../InstantSearchNext';
 
@@ -81,6 +81,42 @@ describe('rerendering', () => {
 
     expect(client.search).toHaveBeenCalledTimes(1);
   });
+
+  it('does not have server-side rendering context when not needed', async () => {
+    function TestContext() {
+      const rscContext = useContext(InstantSearchRSCContext);
+
+      return <div data-testid="rsc">{rscContext ? 'rsc' : 'no-rsc'}</div>;
+    }
+
+    const { unmount } = render(
+      <InstantSearchNext searchClient={client} indexName="indexName">
+        <SearchBox />
+        <TestContext />
+      </InstantSearchNext>
+    );
+
+    expect(screen.getByTestId('rsc')).toHaveTextContent('rsc');
+
+    await act(async () => {
+      await wait(0);
+      unmount();
+      await wait(0);
+    });
+
+    render(
+      <InstantSearchNext searchClient={client} indexName="indexName">
+        <SearchBox />
+        <TestContext />
+      </InstantSearchNext>
+    );
+
+    await act(async () => {
+      await wait(0);
+    });
+
+    expect(screen.getByTestId('rsc')).toHaveTextContent('no-rsc');
+  });
 });
 
 afterAll(() => {