fix(next): insert empty initial results for page with no widgets (#6595)

Author: aymeric-giraudet

packages/react-instantsearch-nextjs/src/InitializePromise.tsx renamed to packages/react-instantsearch-nextjs/src/InitializePromise.ts

@@ -1,17 +1,16 @@
 import { getInitialResults } from 'instantsearch.js/es/lib/server';
 import { resetWidgetId, walkIndex } from 'instantsearch.js/es/lib/utils';
 import { ServerInsertedHTMLContext } from 'next/navigation';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import {
   useInstantSearchContext,
   useRSCContext,
   wrapPromiseWithState,
 } from 'react-instantsearch-core';
 
-import { htmlEscapeJsonString } from './htmlEscape';
+import { createInsertHTML } from './createInsertHTML';
 
 import type {
-  InitialResults,
   SearchOptions,
   CompositionClient,
   SearchClient,
@@ -26,33 +25,6 @@ type InitializePromiseProps = {
   nonce?: string;
 };
 
-const createInsertHTML =
-  ({
-    options,
-    results,
-    nonce,
-  }: {
-    options: { inserted: boolean };
-    results: InitialResults;
-    nonce?: string;
-  }) =>
-  () => {
-    if (options.inserted) {
-      return <></>;
-    }
-    options.inserted = true;
-    return (
-      <script
-        nonce={nonce}
-        dangerouslySetInnerHTML={{
-          __html: `window[Symbol.for("InstantSearchInitialResults")] = ${htmlEscapeJsonString(
-            JSON.stringify(results)
-          )}`,
-        }}
-      />
-    );
-  };
-
 export function InitializePromise({ nonce }: InitializePromiseProps) {
   const search = useInstantSearchContext();
   const waitForResultsRef = useRSCContext();

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

@@ -76,7 +76,7 @@ This message will only be displayed in development mode.`
       <InstantSearch {...instantSearchProps} routing={routing!}>
         {isServer && <InitializePromise nonce={nonce} />}
         {children}
-        {isServer && <TriggerSearch />}
+        {isServer && <TriggerSearch nonce={nonce} />}
       </InstantSearch>
     </ServerOrHydrationProvider>
   );

packages/react-instantsearch-nextjs/src/TriggerSearch.ts

@@ -1,11 +1,20 @@
+import { ServerInsertedHTMLContext } from 'next/navigation';
+import { useContext } from 'react';
 import {
   useInstantSearchContext,
   useRSCContext,
 } from 'react-instantsearch-core';
 
-export function TriggerSearch() {
+import { createInsertHTML } from './createInsertHTML';
+
+export function TriggerSearch({ nonce }: { nonce?: string }) {
   const instantsearch = useInstantSearchContext();
   const waitForResultsRef = useRSCContext();
+  const insertHTML =
+    useContext(ServerInsertedHTMLContext) ||
+    (() => {
+      throw new Error('Missing ServerInsertedHTMLContext');
+    });
 
   if (waitForResultsRef?.current?.status === 'pending') {
     if (instantsearch._hasSearchWidget) {
@@ -16,6 +25,12 @@ export function TriggerSearch() {
       }
     }
     instantsearch._hasRecommendWidget && instantsearch.mainHelper?.recommend();
+
+    // If there are no widgets, we inject empty initial results instantly
+    if (!instantsearch._hasSearchWidget && !instantsearch._hasRecommendWidget) {
+      const options = { inserted: false };
+      insertHTML(createInsertHTML({ options, results: {}, nonce }));
+    }
   }
 
   return null;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { htmlEscapeJsonString } from './htmlEscape';
+
+import type { InitialResults } from 'instantsearch.js';
+
+export const createInsertHTML =
+  ({
+    options,
+    results,
+    nonce,
+  }: {
+    options: { inserted: boolean };
+    results: InitialResults;
+    nonce?: string;
+  }) =>
+  () => {
+    if (options.inserted) {
+      return <></>;
+    }
+    options.inserted = true;
+    return (
+      <script
+        nonce={nonce}
+        dangerouslySetInnerHTML={{
+          __html: `window[Symbol.for("InstantSearchInitialResults")] = ${htmlEscapeJsonString(
+            JSON.stringify(results)
+          )}`,
+        }}
+      />
+    );
+  };