chore: do not generate api/_content

composables/useBlog.ts

@@ -20,9 +20,11 @@ export function useBlog() {
     },
   })
 
-  const data = useState<BlogPostCard[]>('content:blog', () => [])
   const route = useRoute()
 
+  const allArticles = ref<BlogPostCard[]>([])
+  const articles = ref<BlogPostCard[]>([])
+
   // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system.
   const hasQuery = computed(() => {
     return route.query.q || route.query['categories[]'] || route.query['packages[]'] || route.query['authors[]'] || route.query.order || route.query.orderby
@@ -34,7 +36,7 @@ export function useBlog() {
   })
 
   const categoriesOptions = computed(() => {
-    const categories = data.value.flatMap(item => item.categories || [])
+    const categories = articles.value.flatMap(item => item.categories || [])
     const dedupe = new Set<string>(categories)
 
     return Array.from(dedupe).sort()
@@ -47,7 +49,7 @@ export function useBlog() {
   })
 
   const packagesOptions = computed(() => {
-    const packages = data.value.flatMap(item => item.packages || [])
+    const packages = articles.value.flatMap(item => item.packages || [])
     const dedupe = new Set<string>(packages)
 
     return Array.from(dedupe).sort()
@@ -60,7 +62,7 @@ export function useBlog() {
   })
 
   const authorsOptions = computed(() => {
-    const authors = data.value.flatMap(item => item.authors || [])
+    const authors = articles.value.flatMap(item => item.authors || [])
     const dedupe = new Map<string, Author>()
 
     authors.forEach((author) => {
@@ -99,8 +101,6 @@ export function useBlog() {
     return route.query.orderBy as LocationQueryValue || defaultOrderBy
   })
 
-  const articles = useState<BlogPostCard[]>('articles', () => [])
-
   const updateQuery = (query?: { q?: string, 'categories[]'?: string[], 'packages[]'?: string[], 'authors[]'?: string[], order?: Order, orderBy?: string }) => {
     navigateTo({
       query: {
@@ -150,41 +150,35 @@ export function useBlog() {
     return data
   }
 
-  const search = (data: BlogPostCard[]) => {
-    if (!q.value)
+  const search = (data: BlogPostCard[], q: string) => {
+    if (!q)
       return data as (BlogPostCard & SearchResult)[]
 
-    return miniSearch.search(q.value) as (BlogPostCard & SearchResult)[]
+    return miniSearch.search(q) as (BlogPostCard & SearchResult)[]
   }
 
   const getArticles = () => {
-    const searched = search(data.value)
+    const searched = search(allArticles.value, q.value)
     const filtered = filter(searched)
     const sorted = sort(filtered, order.value, orderBy.value)
 
     return sorted
   }
 
   const fetchBlogArticles = async () => {
-    if (data.value.length) {
-      miniSearch.addAll(data.value)
-      // Do not update articles list on client side to avoid hydration error
-      return
-    }
+    const { data: res, error } = await useAsyncData('content:use-blog:data', () => queryContent('/blog/').only(fields).sort({ publishedAt: -1 }).find())
 
-    try {
-      const res = await queryContent('/blog/').only(fields).find()
-      data.value = res as BlogPostCard[]
-      miniSearch.addAll(res)
-      articles.value = getArticles()
-    }
-    catch (error) {
+    if (error.value) {
       throw createError({
-        statusCode: 500,
-        statusMessage: 'Server Error',
+        statusCode: error.value?.statusCode,
+        statusMessage: error.value?.statusMessage,
         fatal: true,
       })
     }
+
+    miniSearch.addAll(res.value as BlogPostCard[])
+    allArticles.value = res.value as BlogPostCard[]
+    articles.value = res.value as BlogPostCard[]
   }
 
   const storage = useStorage('blog', {

composables/usePackages.ts

@@ -20,9 +20,11 @@ export function usePackages() {
     },
   })
 
-  const data = useState<Package[]>('content:packages', () => [])
   const route = useRoute()
 
+  const allPackages = ref<Package[]>([])
+  const packages = ref<Package[]>([])
+
   // This is important to avoid a merge the URL and some data in storage for each missing query in URL. We cannot directly check for query to avoid having UTM breaking the system.
   const hasQuery = computed(() => {
     return route.query.q || route.query.order || route.query.orderby
@@ -63,8 +65,6 @@ export function usePackages() {
     return route.query.orderBy as LocationQueryValue || defaultOrderBy
   })
 
-  const packages = useState<Package[]>('packages', () => [])
-
   const updateQuery = (query?: { q?: string, order?: Order, orderBy?: string }) => {
     navigateTo({
       query: {
@@ -83,39 +83,34 @@ export function usePackages() {
     updateQuery(defaultQuery)
   }
 
-  const search = (data: Package[]) => {
-    if (!q.value)
+  const search = (data: Package[], q: string) => {
+    if (!q)
       return data as (Package & SearchResult)[]
 
-    return miniSearch.search(q.value) as (Package & SearchResult)[]
+    return miniSearch.search(q) as (Package & SearchResult)[]
   }
 
   const getPackages = () => {
-    const searched = search(data.value)
+    const searched = search(allPackages.value, q.value)
     const sorted = sort(searched, order.value, orderBy.value)
 
     return sorted
   }
 
   const fetchPackages = async () => {
-    if (data.value.length) {
-      miniSearch.addAll(data.value)
-      return
-    }
+    const { data: res, error } = await useAsyncData('content:use-packages:data', () => $fetch('/api/content/packages.json'))
 
-    try {
-      const res = await $fetch('/api/content/packages.json')
-      data.value = res as Package[]
-      miniSearch.addAll(data.value)
-      packages.value = getPackages()
-    }
-    catch (error) {
+    if (error.value) {
       throw createError({
-        statusCode: 500,
-        statusMessage: 'Server Error',
+        statusCode: error.value?.statusCode,
+        statusMessage: error.value?.statusMessage,
         fatal: true,
       })
     }
+
+    miniSearch.addAll(res.value as Package[])
+    allPackages.value = res.value as Package[]
+    packages.value = res.value as Package[]
   }
 
   const storage = useStorage('packages', {
@@ -151,9 +146,9 @@ export function usePackages() {
     }
   })
 
-  const numberOfPackages = computed(() => data.value.length)
+  const numberOfPackages = computed(() => allPackages.value.length)
 
-  const monthlyDownloads = computed(() => data.value.reduce((acc, pkg) => {
+  const monthlyDownloads = computed(() => allPackages.value.reduce((acc, pkg) => {
     if (!pkg.monthlyDownloads)
       return acc
 

package.json

@@ -49,5 +49,10 @@
     "ofetch": "^1.3.3",
     "slugify": "^1.6.6",
     "unstorage": "^1.10.1"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@nuxt/[email protected]": "patches/@[email protected]"
+    }
   }
 }

pages/index.vue

@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-const { data: page, error } = await useAsyncData('index', () => queryContent('/').findOne())
-
-if (error.value) {
-  throw createError({
-    statusCode: 404,
-    message: 'Page not found',
-    fatal: true,
-  })
-}
+const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 
 useSeoMeta({
   titleTemplate: '%siteName: %pageTitle',

patches/@nuxt__content@2.10.0.patch

@@ -0,0 +1,34 @@
+diff --git a/dist/runtime/legacy/composables/navigation.mjs b/dist/runtime/legacy/composables/navigation.mjs
+index 871d9b4c705e6929063402236e4f650fa60aeee7..74f730474332256bf50a594a4004c6061a9c68d5 100644
+--- a/dist/runtime/legacy/composables/navigation.mjs
++++ b/dist/runtime/legacy/composables/navigation.mjs
+@@ -12,9 +12,9 @@ export const fetchContentNavigation = async (queryBuilder) => {
+   }
+   const params = queryBuilder.params();
+   const apiPath = content.experimental.stripQueryParameters ? withContentBase(`/navigation/${process.dev ? "_" : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`) : withContentBase(process.dev ? `/navigation/${hash(params)}` : `/navigation/${hash(params)}.${content.integrity}.json`);
+-  if (!process.dev && process.server) {
+-    addPrerenderPath(apiPath);
+-  }
++  // if (!process.dev && process.server) {
++  //   addPrerenderPath(apiPath);
++  // }
+   if (shouldUseClientDB()) {
+     const generateNavigation = await import("./client-db.mjs").then((m) => m.generateNavigation);
+     return generateNavigation(params);
+diff --git a/dist/runtime/legacy/composables/query.mjs b/dist/runtime/legacy/composables/query.mjs
+index a73e58b91094082a1e729f8391d32f39e34ebbde..7e229bb50c30bd3874e43c75352a2d553e39442f 100644
+--- a/dist/runtime/legacy/composables/query.mjs
++++ b/dist/runtime/legacy/composables/query.mjs
+@@ -10,9 +10,9 @@ export const createQueryFetch = () => async (query) => {
+   const { content } = useRuntimeConfig().public;
+   const params = query.params();
+   const apiPath = content.experimental.stripQueryParameters ? withContentBase(`/query/${process.dev ? "_" : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`) : withContentBase(process.dev ? "/query" : `/query/${hash(params)}.${content.integrity}.json`);
+-  if (!process.dev && process.server) {
+-    addPrerenderPath(apiPath);
+-  }
++  // if (!process.dev && process.server) {
++  //   addPrerenderPath(apiPath);
++  // }
+   if (shouldUseClientDB()) {
+     const db = await import("./client-db.mjs").then((m) => m.useContentDatabase());
+     return db.fetch(query);