docs(perf): defer fetching search and move nav to state

docs/app.vue

@@ -26,14 +26,21 @@ const links = [{
   to: 'https://github.com/nuxt/image/releases',
   target: '_blank',
 }]
-const { data: files } = useLazyFetch('/api/search.json', {
-  default: () => [],
-  server: false,
+
+const enableDocsSearch = ref(false)
+const files = shallowRef([])
+onNuxtReady(async () => {
+  files.value = await $fetch('/api/search.json')
+  enableDocsSearch.value = true
 })
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 // Provide
+const navigation = useState()
 provide('navigation', navigation)
+
+if (process.server) {
+  navigation.value = await fetchContentNavigation()
+}
 </script>
 
 <template>
@@ -49,8 +56,8 @@ provide('navigation', navigation)
     </template>
     <!-- Mobile panel -->
     <template v-if="$route.path !== '/'" #panel>
-      <LazyUDocsSearchButton size="md" class="w-full mb-4" />
-      <LazyUNavigationTree :links="mapContentNavigation(navigation)" default-open :multiple="false" />
+      <UDocsSearchButton size="md" class="w-full mb-4" />
+      <UNavigationTree :links="mapContentNavigation(navigation)" default-open :multiple="false" />
     </template>
   </UHeader>
   <NuxtLayout>
@@ -71,7 +78,5 @@ provide('navigation', navigation)
       <USocialButton aria-label="Nuxt Image on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/image" />
     </template>
   </UFooter>
-  <ClientOnly>
-    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
-  </ClientOnly>
+  <UDocsSearch v-if="enableDocsSearch" :files="files" :navigation="navigation" :links="links" />
 </template>

docs/modules/components-chunk.ts

@@ -0,0 +1,54 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import defu from 'defu'
+
+export default defineNuxtModule({
+  meta: { name: 'components-chunk' },
+  setup() {
+    const nuxt = useNuxt()
+
+    const nonGlobals = new Set([
+      'ContentList',
+      'ContentNavigation',
+      'ContentQuery',
+      'ContentRenderer',
+      'ContentRendererMarkdown',
+      'ContentSlot',
+      'DocumentDrivenEmpty',
+      'DocumentDrivenNotFound',
+      'Markdown',
+    ])
+
+    const globals = new Set<string>()
+
+    nuxt.hook('vite:extendConfig', config => {
+      config.build = defu(config.build, {
+        rollupOptions: {
+          output: {
+            manualChunks: {
+              'prose': [...globals]
+            }
+          }
+        }
+      })
+    })
+
+    nuxt.hook('components:extend', components => {
+      for (const component of components) {
+        if (nonGlobals.has(component.pascalName)) {
+          component.global = false
+        }
+
+        // Related to https://github.com/nuxt/nuxt/pull/22558
+        // Adding all global components to the main entry
+        // To avoid lagging during page navigation on client-side
+        // Downside: bigger JS bundle
+        // With sync: 465KB, gzip: 204KB
+        // Without: 418KB, gzip: 184KB
+        if (component.global) {
+          globals.add(component.filePath)
+          component.global = true
+        }
+      }
+    })
+  },
+})

docs/nuxt.config.ts

@@ -29,6 +29,9 @@ export default defineNuxtConfig({
       'DM+Sans': [400, 500, 600, 700],
     },
   },
+  experimental: {
+    headNext: true
+  },
   nitro: {
     prerender: {
       routes: ['/api/search.json'],
@@ -43,19 +46,4 @@ export default defineNuxtConfig({
     '/components/nuxt-picture': { redirect: { to: '/usage/nuxt-picture', statusCode: 301 } },
     '/api/use-image': { redirect: { to: '/usage/use-image', statusCode: 301 } },
   },
-  hooks: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
-    // Adding all global components to the main entry
-    // To avoid lagging during page navigation on client-side
-    // Downside: bigger JS bundle
-    // With sync: 465KB, gzip: 204KB
-    // Without: 418KB, gzip: 184KB
-    'components:extend' (components) {
-      for (const comp of components) {
-        if (comp.global) {
-          comp.global = 'sync'
-        }
-      }
-    }
-  }
 })

docs/package.json

@@ -13,7 +13,7 @@
     "@iconify-json/simple-icons": "^1.1.70",
     "@nuxt/content": "^2.8.2",
     "@nuxt/image": "link:..",
-    "@nuxthq/elements": "npm:@nuxthq/[email protected]28242263.01d174c",
+    "@nuxthq/elements": "npm:@nuxthq/[email protected]28245089.29bf1c5",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",