chore: various improvements for perf (#2144)

atinux · web-flow · commit e445db88b063 · 2025-12-22T16:18:35.000+01:00
diff --git a/app/app.vue b/app/app.vue
@@ -15,27 +15,8 @@ watch(() => colorMode.preference, (newMode, oldMode) => {
 })
 
 const [{ data: navigation }, { data: files }] = await Promise.all([
-  useAsyncData('navigation', () => {
-    return Promise.all([
-      queryCollectionNavigation('docsv3', ['titleTemplate']).then(data => data[0]?.children),
-      queryCollectionNavigation('docsv4', ['titleTemplate']).then(data => data[0]?.children),
-      queryCollectionNavigation('blog')
-    ])
-  }, {
-    transform: data => data.flat(),
-    watch: [version]
-  }),
-  useLazyAsyncData('search', () => {
-    return Promise.all([
-      queryCollectionSearchSections('docsv3', { ignoredTags: ['style'] }),
-      queryCollectionSearchSections('docsv4', { ignoredTags: ['style'] }),
-      queryCollectionSearchSections('blog')
-    ])
-  }, {
-    server: false,
-    transform: data => data.flat(),
-    watch: [version]
-  })
+  useFetch('/api/navigation.json'),
+  useFetch('/api/search.json', { server: false })
 ])
 
 onNuxtReady(() => {
diff --git a/app/error.vue b/app/error.vue
@@ -15,27 +15,8 @@ const { fetchList: fetchModules } = useModules()
 const { fetchList: fetchHosting } = useHostingProviders()
 
 const [{ data: navigation }, { data: files }] = await Promise.all([
-  useAsyncData('navigation', () => {
-    return Promise.all([
-      queryCollectionNavigation('docsv3', ['titleTemplate']),
-      queryCollectionNavigation('docsv4', ['titleTemplate']).then(data => data[0]?.children),
-      queryCollectionNavigation('blog')
-    ])
-  }, {
-    transform: data => data.flat(),
-    watch: [version]
-  }),
-  useLazyAsyncData('search', () => {
-    return Promise.all([
-      queryCollectionSearchSections('docsv3', { ignoredTags: ['style'] }),
-      queryCollectionSearchSections('docsv4', { ignoredTags: ['style'] }),
-      queryCollectionSearchSections('blog')
-    ])
-  }, {
-    server: false,
-    transform: data => data.flat(),
-    watch: [version]
-  })
+  useFetch('/api/navigation.json'),
+  useFetch('/api/search.json', { server: false })
 ])
 
 onNuxtReady(() => {
diff --git a/modules/local.ts b/modules/local.ts
@@ -26,7 +26,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     if (options.uiOnly) {
       consola.info('Enabling UI-only mode for local development')
-      nuxt.options.routeRules['/api/**'] = { proxy: { to: 'https://nuxt.com/api/**' } }
+      nuxt.options.routeRules['/api/v1/**'] = { proxy: { to: 'https://nuxt.com/api/v1/**' } }
     }
   }
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -42,6 +42,11 @@ export default defineNuxtConfig({
     }
   },
   $production: {
+    hub: {
+      kv: {
+        driver: 'vercel-runtime-cache'
+      }
+    },
     image: {
       ipx: {
         baseURL: 'https://ipx.nuxt.com'
@@ -116,6 +121,9 @@ export default defineNuxtConfig({
     // Admin
     '/admin': { ssr: false },
     '/admin/**': { ssr: false },
+    // Main navigation
+    '/api/navigation.json': { prerender: true },
+    '/api/search.json': { prerender: true },
     // Redirects
     '/docs': { redirect: '/docs/getting-started/introduction', prerender: false },
     '/docs/3.x': { redirect: '/docs/3.x/getting-started/introduction', prerender: false },
@@ -279,9 +287,7 @@ export default defineNuxtConfig({
   },
   hub: {
     db: 'sqlite',
-    kv: {
-      driver: 'vercel-runtime-cache'
-    },
+    kv: true,
     cache: true
   },
   typescript: {
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@iconify-json/simple-icons": "^1.2.63",
     "@libsql/client": "^0.15.15",
     "@npm/types": "^2.1.0",
-    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@3624",
+    "@nuxt/content": "^3.9.0",
     "@nuxt/hints": "1.0.0-alpha.3",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "^0.13.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/server/api/contributors/index.get.ts b/server/api/contributors/index.get.ts
@@ -3,7 +3,7 @@ export default cachedEventHandler(async () => {
 }, {
   name: 'contributors',
   swr: true,
-  maxAge: 60 * 5 // 5 minutes
+  maxAge: 60 * 60 // 1 hour
 })
 
 interface NuxtersContributor {
diff --git a/server/api/jobs.get.ts b/server/api/jobs.get.ts
@@ -12,5 +12,6 @@ export default cachedEventHandler(async () => {
 }, {
   name: 'nuxt-jobs',
   getKey: () => 'jobs',
-  maxAge: 60 * 10 // 10 minutes
+  maxAge: 60 * 60 * 24, // 1 day
+  swr: true
 })
diff --git a/server/api/navigation.json.get.ts b/server/api/navigation.json.get.ts
@@ -0,0 +1,10 @@
+// This route will be pre-rendered as /api/navigation.json
+import { queryCollectionNavigation } from '@nuxt/content/server'
+
+export default defineEventHandler(async (event) => {
+  return Promise.all([
+    queryCollectionNavigation(event, 'docsv3', ['titleTemplate']).then(data => data[0]?.children),
+    queryCollectionNavigation(event, 'docsv4', ['titleTemplate']).then(data => data[0]?.children),
+    queryCollectionNavigation(event, 'blog')
+  ]).then(data => data.flat())
+})
diff --git a/server/api/search.json.get.ts b/server/api/search.json.get.ts
@@ -0,0 +1,10 @@
+// This route will be pre-rendered as /api/navigation.json
+import { queryCollectionSearchSections } from '@nuxt/content/server'
+
+export default defineEventHandler(async (event) => {
+  return Promise.all([
+    queryCollectionSearchSections(event, 'docsv3', { ignoredTags: ['style'] }),
+    queryCollectionSearchSections(event, 'docsv4', { ignoredTags: ['style'] }),
+    queryCollectionSearchSections(event, 'blog')
+  ]).then(data => data.flat())
+})
diff --git a/server/api/sponsors/index.get.ts b/server/api/sponsors/index.get.ts
@@ -28,5 +28,6 @@ export default cachedEventHandler(async (event) => {
 }, {
   name: 'sponsors',
   getKey: () => 'sponsors',
+  swr: true,
   maxAge: 60 * 60 // 1 hour
 })
diff --git a/server/api/stats.get.ts b/server/api/stats.get.ts
@@ -15,5 +15,6 @@ export default cachedEventHandler(async (event) => {
 }, {
   name: 'stats',
   getKey: () => 'nuxt',
+  swr: true,
   maxAge: 60 * 60 // 10 minutes
 })
diff --git a/server/api/v1/modules/[name].get.ts b/server/api/v1/modules/[name].get.ts
@@ -31,5 +31,6 @@ export default defineCachedEventHandler(async (event) => {
 }, {
   name: 'modules:v1',
   getKey: event => event.context.params!.name,
+  swr: true,
   maxAge: 60 * 60 // 1 hour
 })
diff --git a/server/api/v1/teams/[slug].get.ts b/server/api/v1/teams/[slug].get.ts
@@ -23,5 +23,6 @@ export default cachedEventHandler(async (event) => {
   name: 'teams',
   shouldBypassCache: () => !!import.meta.dev,
   getKey: event => 'teams-' + getRouterParam(event, 'slug'),
+  swr: true,
   maxAge: 60 * 60 // 1 hour
 })
diff --git a/server/api/v1/teams/index.get.ts b/server/api/v1/teams/index.get.ts
@@ -1,6 +1,6 @@
 import type { GitHubTeamMember } from '../../../types/github'
 
-export default defineEventHandler(async () => {
+export default defineCachedEventHandler(async () => {
   const [core, _ecosystem] = await Promise.all([
     $fetch<GitHubTeamMember[]>('/api/v1/teams/core'),
     $fetch<GitHubTeamMember[]>('/api/v1/teams/ecosystem')
@@ -22,4 +22,8 @@ export default defineEventHandler(async () => {
     core,
     ecosystem: filteredEcosystem
   }
+}, {
+  name: 'teams',
+  swr: true,
+  maxAge: 60 * 60 // 1 hour
 })
diff --git a/server/utils/github.ts b/server/utils/github.ts
@@ -51,6 +51,11 @@ interface GitHubTeamResponse {
 
 export const github = {
   async fetchRepo(event: H3Event, owner: string, name: string): Promise<GitHubRepository> {
+    const key = `github:repo:${owner}:${name}`
+    const cached = await kv.get<GitHubRepository>(key)
+    if (cached) {
+      return cached
+    }
     try {
       const headers = githubHeaders(event)
       let res = await $fetch<GitHubRepositoryResponse>(`https://api.github.com/repos/${owner}/${name}`, { headers }).catch(() => null)
@@ -60,7 +65,7 @@ export const github = {
         res = await $fetch<GitHubRepositoryResponse>(`https://api.github.com/repos/${owner}/${name}`, { headers: githubHeaders(event, { Authorization: '' }) })
       }
 
-      return {
+      const repo = {
         id: res.id,
         name: res.name,
         repo: res.full_name,
@@ -72,7 +77,9 @@ export const github = {
         watchers: res.watchers_count,
         forks: res.forks_count,
         defaultBranch: res.default_branch
-      }
+      } satisfies GitHubRepository
+      await kv.set(key, repo, { ttl: 60 * 60 * 24 }) // cache for 1 day
+      return repo
     } catch (err) {
       console.error(`Cannot fetch github repo API info for ${owner}/${name}: ${err}`)
       // Cannot call Github API, fallback to UnGH
@@ -98,6 +105,12 @@ export const github = {
       })
     }
 
+    const key = `github:team:${org}:${teamName}`
+    const cached = await kv.get<GitHubTeamMember[]>(key)
+    if (cached) {
+      return cached
+    }
+
     const team = await $fetch<GitHubTeamResponse>(`https://api.github.com/graphql`, {
       method: 'POST',
       headers: githubHeaders(event),
@@ -138,7 +151,7 @@ export const github = {
       }
     })
 
-    return team.data.organization.team.members.nodes.map((member): GitHubTeamMember => {
+    const members = team.data.organization.team.members.nodes.map((member): GitHubTeamMember => {
       return {
         name: member.name,
         login: member.login,
@@ -157,6 +170,8 @@ export const github = {
         ]) || [])
       }
     })
+    await kv.set(key, members, { ttl: 60 * 60 * 24 }) // cache for 1 day
+    return members
   }
 }
 
diff --git a/server/utils/module.ts b/server/utils/module.ts
@@ -18,6 +18,11 @@ export const fetchModules = cachedFunction(async (_event: H3Event): Promise<Modu
 })
 
 export async function fetchModuleStats(event: H3Event, module: BaseModule, preloadedNpmStats?: NpmDownloadStats) {
+  const key = `module:stats:${module.name}`
+  const cached = await kv.get<ModuleStats>(key)
+  if (cached) {
+    return cached
+  }
   console.info(`Fetching module ${module.name} stats...`)
   const ghRepo = module.repo.split('#')[0]
   const [owner, name] = ghRepo.split('/')
@@ -34,7 +39,7 @@ export async function fetchModuleStats(event: H3Event, module: BaseModule, prelo
         }
       })
   ])
-  return {
+  const stats = {
     version: npmInfos?.['dist-tags']?.latest || '0.0.0',
     downloads: npmStats.downloads,
     stars: repo.stars,
@@ -44,6 +49,8 @@ export async function fetchModuleStats(event: H3Event, module: BaseModule, prelo
     publishedAt: +new Date(npmInfos?.time?.modified || Date.now()),
     createdAt: +new Date(npmInfos?.time?.created || Date.now())
   } satisfies ModuleStats
+  await kv.set(key, stats, { ttl: 60 * 60 * 24 }) // cache for 1 day
+  return stats
 }
 
 interface UnghContributor {
@@ -57,13 +64,19 @@ interface UnghResponse {
 }
 
 export async function fetchModuleContributors(_event: H3Event, module: BaseModule): Promise<ModuleContributor[]> {
-  console.info(`Fetching module ${module.name} contributors ...`)
   const ghRepo = module.repo.split('#')[0]
   const [owner, name] = ghRepo.split('/')
-
+  const key = `module:contributors:${owner}:${name}`
+  const cached = await kv.get<ModuleContributor[]>(key)
+  if (cached) {
+    return cached
+  }
+  console.info(`Fetching module ${module.name} contributors ...`)
   try {
-    const { contributors } = await $fetch<UnghResponse>(`https://ungh.cc/repos/${owner}/${name}/contributors`)
-    return contributors.filter(contributor => !isBot(contributor.username))
+    const res = await $fetch<UnghResponse>(`https://ungh.cc/repos/${owner}/${name}/contributors`)
+    const contributors = res.contributors.filter(contributor => !isBot(contributor.username))
+    await kv.set(key, contributors, { ttl: 60 * 60 * 24 }) // cache for 1 day
+    return contributors
   } catch (err) {
     console.error(`Cannot fetch github contributors info for ${module.repo}: ${err}`)
     return []
diff --git a/server/utils/npm.ts b/server/utils/npm.ts
diff --git a/server/utils/sponsors.ts b/server/utils/sponsors.ts

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export default defineNuxtModule<ModuleOptions>({`
`26`	`26`
`27`	`27`	`if (options.uiOnly) {`
`28`	`28`	`consola.info('Enabling UI-only mode for local development')`
`29`		`- nuxt.options.routeRules['/api/'] = { proxy: { to: 'https://nuxt.com/api/' } }`
	`29`	`+ nuxt.options.routeRules['/api/v1/'] = { proxy: { to: 'https://nuxt.com/api/v1/' } }`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`	`})`