docs: improve performances (#570)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app.vue

@@ -9,7 +9,6 @@
           <template #left>
             <UAside :links="anchors">
               <BranchSelect />
-
               <UNavigationTree :links="mapContentNavigation(navigation)" />
             </UAside>
           </template>
@@ -20,7 +19,7 @@
     </UMain>
 
     <ClientOnly>
-      <UDocsSearch :files="files" :navigation="navigation" />
+      <LazyUDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications>
@@ -40,24 +39,11 @@ const colorMode = useColorMode()
 const { prefix, removePrefixFromNavigation, removePrefixFromFiles } = useContentSource()
 const { mapContentNavigation } = useElementsHelpers()
 
-const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
+const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+const { data: search } = useLazyFetch('/api/search.json', {
   default: () => [],
-  transform: (navigation) => {
+  server: false
-    navigation = navigation.find(link => link._path === prefix.value)?.children || []
-
-    return prefix.value === '/main' ? removePrefixFromNavigation(navigation) : navigation
-  },
-  watch: [prefix]
-})
-
-const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
-  default: () => [],
-  transform: (files) => {
-    files = files.filter(file => file._path.startsWith(prefix.value))
-
-    return prefix.value === '/main' ? removePrefixFromFiles(files) : files
-  },
-  watch: [prefix]
 })
 
 const anchors = [{
@@ -78,6 +64,18 @@ const anchors = [{
 
 // Computed
 
+const navigation = computed(() => {
+  const navigation = nav.value.find(link => link._path === prefix.value)?.children || []
+
+  return prefix.value === '/main' ? removePrefixFromNavigation(navigation) : navigation
+})
+
+const files = computed(() => {
+  const files = search.value.filter(file => file._path.startsWith(prefix.value))
+
+  return prefix.value === '/main' ? removePrefixFromFiles(files) : files
+})
+
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 // Head

docs/components/Header.vue

@@ -21,7 +21,6 @@
 
     <template #panel>
       <BranchSelect />
-
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </UHeader>

docs/nuxt.config.ts

@@ -57,12 +57,15 @@ export default defineNuxtConfig({
   },
   nitro: {
     prerender: {
-      routes: ['/getting-started', '/dev/getting-started']
+      // Waiting for https://github.com/nuxt/nuxt/issues/22763
+      concurrency: 1,
+      routes: [
+        '/getting-started',
+        '/dev/getting-started',
+        '/api/search.json'
+      ]
     }
   },
-  experimental: {
-    payloadExtraction: false
-  },
   componentMeta: {
     globalsOnly: true,
     exclude: [resolve('./components'), resolve('@nuxthq/elements/components')],
@@ -76,5 +79,16 @@ export default defineNuxtConfig({
   typescript: {
     strict: false,
     includeWorkspace: true
+  },
+  hooks: {
+    // TODO: Uncomment after Nuxt v3.7 upgrade
+    // Related to https://github.com/nuxt/nuxt/pull/22558
+    // 'components:extend': (components) => {
+    //   components.forEach((component) => {
+    //     if (component.global) {
+    //       component.global = 'sync'
+    //     }
+    //   })
+    // }
   }
 })

docs/server/api/search.json.get.ts

@@ -0,0 +1,5 @@
+import { serverQueryContent } from '#content/server'
+
+export default eventHandler(async (event) => {
+  return serverQueryContent(event).where({ _type: 'markdown', navigation: { $ne: false } }).find()
+})

src/runtime/plugins/colors.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 import { hexToRgb } from '../utils'
-import { defineNuxtPlugin, useHead, useAppConfig, useNuxtApp } from '#imports'
+import { defineNuxtPlugin, useAppConfig } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
 export default defineNuxtPlugin((nuxtApp) => {