[nextra] Preload Search component (#903)

hariria · Andrew Hariri · web-flow · commit c1dfd37d8e0a · 2025-05-04T22:45:33.000Z
Co-authored-by: Andrew Hariri &lt;hariria@usc.edu&gt;
diff --git a/apps/nextra/components/preload-search/DynamicPreloadSearch.tsx b/apps/nextra/components/preload-search/DynamicPreloadSearch.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic";
+
+export const DynamicPreloadSearch = dynamic(() => import("./PreloadSearch"), {
+  ssr: false,
+});
diff --git a/apps/nextra/components/preload-search/PreloadSearch.tsx b/apps/nextra/components/preload-search/PreloadSearch.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect } from "react";
+
+export interface PreloadSearchProps {}
+
+/**
+ * Hack to Preloads Search by making a search request, then clearing it.
+ *
+ * NOTE: This must be client-side only as it includes a useEffect hook.
+ *
+ * @see https://github.com/shuding/nextra/blob/v3/packages/nextra-theme-docs/src/components/flexsearch.tsx
+ * @see https://github.com/shuding/nextra/blob/v3/packages/nextra-theme-docs/src/components/search.tsx
+ */
+export function PreloadSearch(): JSX.Element | null {
+  useEffect(() => {
+    // Try desktop nav container first
+    let container = document.querySelector(".nextra-nav-container");
+
+    // Fallback to mobile sidebar container
+    if (!container) {
+      container = document.querySelector(".nextra-sidebar-container");
+    }
+
+    if (!container) return;
+
+    const input = container.querySelector(
+      'input[type="search"]',
+    ) as HTMLInputElement;
+    if (!input) return;
+
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value",
+    )?.set;
+
+    nativeInputValueSetter?.call(input, "warmup");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    setTimeout(() => {
+      nativeInputValueSetter?.call(input, "");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }, 500);
+  }, []);
+
+  return null;
+}
+
+export default PreloadSearch;
diff --git a/apps/nextra/components/preload-search/index.ts b/apps/nextra/components/preload-search/index.ts
@@ -0,0 +1,2 @@
+export * from "./PreloadSearch";
+export * from "./DynamicPreloadSearch";
diff --git a/apps/nextra/pages/_app.tsx b/apps/nextra/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { docsConfig } from "@docs-config";
 import "../styles.css";
+import { DynamicPreloadSearch } from "@components/preload-search";
 
 export const config = {
   runtime: "experimental-edge",
@@ -15,6 +16,7 @@ export default function App({ Component, pageProps }) {
   return (
     <>
       <GoogleAnalytics gaId={docsConfig.googleAnalyticsId} />
+      <DynamicPreloadSearch />
       <Component {...pageProps} />
     </>
   );
diff --git a/apps/nextra/pages/_document.tsx b/apps/nextra/pages/_document.tsx
@@ -21,6 +21,13 @@ class MyDocument extends Document {
               `,
             }}
           />
+          <link
+            rel="preload"
+            href="/_next/static/chunks/nextra-data-en.json"
+            as="fetch"
+            type="application/json"
+            crossOrigin="anonymous"
+          />
         </Head>
         <body>
           <SkipNavLink styled />
diff --git a/apps/nextra/public/sitemap-en.xml b/apps/nextra/public/sitemap-en.xml
diff --git a/apps/nextra/public/sitemap-zh.xml b/apps/nextra/public/sitemap-zh.xml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from "./PreloadSearch";`
	`2`	`+export * from "./DynamicPreloadSearch";`