fix(search): fetch head sha client only

app/app.vue

@@ -7,16 +7,22 @@ const { seo, docs } = useAppConfig()
 const content = useDocsContent()
 const route = useRoute()
 
-const [{ data: navigation }, { data: sha }] = await Promise.all([
-  useAsyncData('navigation', () => content.value.client.navigation(), {
-    watch: [() => content.value.routeBase],
-  }),
-  useAsyncData(
-    () => `content-head:${content.value.apiBase}`,
-    () => $fetch<{ sha: string | null }>(`${content.value.apiBase}/head`).then(({ sha }) => sha),
-    { default: () => null, watch: [() => content.value.apiBase] }
-  ),
-])
+const { data: navigation } = await useAsyncData('navigation', () => content.value.client.navigation(), {
+  watch: [() => content.value.routeBase],
+})
+
+// Client-only: an SSR value gets baked into the page's ISR entry and would pin search to a stale commit.
+const { data: sha } = useAsyncData(
+  () => `content-head:${content.value.apiBase}`,
+  () =>
+    $fetch<{ sha: string | null }>(`${content.value.apiBase}/head`)
+      .then(({ sha }) => sha)
+      .catch((error) => {
+        console.error('[search] could not resolve the content head', error)
+        return null
+      }),
+  { server: false, watch: [() => content.value.apiBase] }
+)
 
 const nuxtApp = useNuxtApp()
 const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.routeBase))

app/components/AppHeader.vue

@@ -4,7 +4,6 @@ const content = useDocsContent()
 const historyOpen = useVersionHistory()
 const assistantOpen = useAssistant()
 const navigation = useMainNavigation()
-const { available: searchAvailable } = useSearch()
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const { available: searchAvailable } = useSearch()
 
     <template #right>
       <UContentSearchButton
-        v-if="header?.search && searchAvailable"
+        v-if="header?.search"
         :collapsed="false"
         :icon="false"
         class="text-muted font-normal hidden lg:inline-flex min-w-[150px]"
@@ -62,7 +61,7 @@ const { available: searchAvailable } = useSearch()
       <div class="flex flex-col justify-between h-full">
         <div class="flex flex-col gap-4">
           <UContentSearchButton
-            v-if="header?.search && searchAvailable"
+            v-if="header?.search"
             :collapsed="false"
             size="xl"
             class="w-full font-normal"

app/components/AppSearch.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
   navigation: NavigationItem[]
 }>()
 
-const { search, status, available } = useSearch()
+const { search, status } = useSearch()
 
 const appConfig = useAppConfig()
 
@@ -55,7 +55,6 @@ const groups = computed(() => {
 
 <template>
   <LazyUContentSearch
-    v-if="available"
     :search="search"
     :search-status="status"
     :navigation="navigation"

app/composables/useSearch.ts

@@ -18,9 +18,9 @@ function searchDebug(): boolean {
  */
 export function useSearch() {
   const content = useDocsContent()
-  const sha = inject<Ref<string | null>>('sha', ref(null))
+  const sha = inject<Ref<string | null | undefined>>('sha', ref(null))
 
-  /** What to hydrate from, or `null` when this route has nothing searchable. */
+  /** What to hydrate from, or `null` when this route has nothing searchable (yet). */
   const target = computed(() => {
     const isPreview = content.value.mode !== 'prod'
     if (sha.value) return {
@@ -39,13 +39,14 @@ export function useSearch() {
     return null
   })
 
-  const available = computed(() => target.value !== null)
-
   /**
    * Load the database for the current target.
    * No-ops if the target is unchanged.
    */
   async function warmup(): Promise<void> {
+    // Not resolved yet — the `watch` below re-runs this once `sha` lands.
+    if (sha.value === undefined) return
+
     const current = target.value
 
     if (!current) {
@@ -87,6 +88,5 @@ export function useSearch() {
     search,
     status: readonly(status),
     warmup,
-    available,
   }
 }

app/error.vue

@@ -19,16 +19,22 @@ useSeoMeta({
 
 const content = useDocsContent()
 
-const [{ data: navigation }, { data: sha }] = await Promise.all([
-  useAsyncData('navigation', () => content.value.client.navigation(), {
-    watch: [() => content.value.routeBase],
-  }),
-  useAsyncData(
-    () => `content-head:${content.value.apiBase}`,
-    () => $fetch<{ sha: string | null }>(`${content.value.apiBase}/head`).then(({ sha }) => sha),
-    { default: () => null, watch: [() => content.value.apiBase] }
-  ),
-])
+const { data: navigation } = await useAsyncData('navigation', () => content.value.client.navigation(), {
+  watch: [() => content.value.routeBase],
+})
+
+// Client-only: an SSR value gets baked into the page's ISR entry and would pin search to a stale commit.
+const { data: sha } = useAsyncData(
+  () => `content-head:${content.value.apiBase}`,
+  () =>
+    $fetch<{ sha: string | null }>(`${content.value.apiBase}/head`)
+      .then(({ sha }) => sha)
+      .catch((error) => {
+        console.error('[search] could not resolve the content head', error)
+        return null
+      }),
+  { server: false, watch: [() => content.value.apiBase] }
+)
 
 // Matches app.vue: nav must be prefixed the same way search results are, so the palette can look them up.
 const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.routeBase))