docs: improve asyncData speed

Author: atinux

docs/app/app.vue

@@ -7,7 +7,9 @@ const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
-const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
 
 const searchTerm = ref('')
 

docs/app/pages/docs/[...slug].vue

@@ -2,41 +2,43 @@
 import { findPageHeadline } from '#ui-pro/utils/content'
 
 const route = useRoute()
+const navigation = inject('navigation')
 
 definePageMeta({
   layout: 'docs',
 })
 
-const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
-if (!page.value) {
+const { data } = await useAsyncData(route.path, () => Promise.all([
+  queryCollection('docs').path(route.path).first(),
+  queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['title', 'description'],
+  }),
+]), {
+  transform: ([page, surround]) => ({ page, surround }),
+})
+if (!data.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
-  return queryCollectionItemSurroundings('docs', route.path, {
-    fields: ['title', 'description'],
-  })
-}, { default: () => [] })
-
-const headline = computed(() => findPageHeadline(page.value))
+const headline = computed(() => findPageHeadline(navigation.value, data.value.page))
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt Content v3',
-  title: page.value.navigation?.title || page.value.title,
-  ogTitle: `${page.value.navigation?.title || page.value.title} - Nuxt Content v3`,
-  description: page.value.description,
-  ogDescription: page.value.description,
+  title: data.value.page.navigation?.title || data.value.page.title,
+  ogTitle: `${data.value.page.navigation?.title || data.value.page.title} - Nuxt Content v3`,
+  description: data.value.page.description,
+  ogDescription: data.value.page.description,
 })
 
 defineOgImageComponent('Docs', {
   headline: headline.value,
-  title: page.value.title,
+  title: data.value.page.title,
 })
 
 const communityLinks = computed(() => [{
   icon: 'i-lucide-pencil',
   label: 'Edit this page',
-  to: `https://github.com/nuxt/content/edit/v3/docs/content/${page?.value?.stem}.${page.value?.extension}`,
+  to: `https://github.com/nuxt/content/edit/v3/docs/content/${data.value.page.stem}.${data.value.page.extension}`,
   target: '_blank',
 }, {
   icon: 'i-lucide-star',
@@ -47,43 +49,43 @@ const communityLinks = computed(() => [{
 </script>
 
 <template>
-  <UPage v-if="page">
+  <UPage v-if="data.page">
     <UPageHeader
-      :title="page.title"
-      :links="page.links"
+      :title="data.page.title"
+      :links="data.page.links"
       :headline="headline"
     >
       <template #description>
         <MDC
-          v-if="page.description"
-          :value="page.description"
+          v-if="data.page.description"
+          :value="data.page.description"
           unwrap="p"
         />
       </template>
     </UPageHeader>
 
     <UPageBody>
       <ContentRenderer
-        v-if="page.body"
-        :value="page"
+        v-if="data.page.body"
+        :value="data.page"
       />
 
       <USeparator />
 
-      <UContentSurround :surround="(surround as any)" />
+      <UContentSurround :surround="(data.surround as any)" />
     </UPageBody>
 
     <template
-      v-if="page?.body?.toc?.links?.length"
+      v-if="data.page?.body?.toc?.links?.length"
       #right
     >
       <UContentToc
-        :links="page.body.toc.links"
+        :links="data.page.body.toc.links"
         class="z-[2]"
       >
         <template #bottom>
           <USeparator
-            v-if="page.body?.toc?.links?.length"
+            v-if="data.page.body?.toc?.links?.length"
             type="dashed"
           />