404 Not Found

[mydracula]

Environment

"@nuxt/content": "^2.2.0",
"@nuxt/kit": "3.0.0-rc.11",
"nuxt": "^3.0.0",

Reproduction

export default defineNuxtConfig({
  typescript: {
    shim: false
  },
  ssr: false,
  app: {
    head: {}
  },
  css: ['@/assets/css/animate.scss', '@unocss/reset/tailwind.css', '@/assets/css/neko.scss', '@/assets/css/index.scss'],
  modules: ['@nuxt/content', '@unocss/nuxt', '@pinia/nuxt'],
  buildDir: 'nuxt-build',
  content: {
    watch: {
      ws: {
        hostname: 'localhost'
      }
    },
    markdown: {
      tags: { h1: 'h1', h2: 'proseH2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', code: 'proseCode', codeInline: 'proseCodeInline' }
    },
    highlight: {}
  }
})

Describe the bug

1. npm run generate

   2 .Request URL: https://buck-1238374.cos-website.ap-chongqing.myqcloud.com/api/_content/query/u7BbTyuhiE.1672998422551.json?_params={%22sort%22:[{%22_file%22:1,%22$numeric%22:true}]} Request Method: GET Status Code: 404 Not Found

Additional context

No response

Logs

No response

[mohsin]

I believe this is the same issue I am facing. I wrote a hacky workaround i.e. to have an extra page to load the API nodes by calling queryContent.

So when you run generate, Nitro walks through all the /pages in Nuxt, which loads any queryContent inside those pages. That function additionally runs addPrerenderPath function IF it's running inside the generate script so that the generated payload (dist) will contain the queries too.

I wish there was better solution, which is why I started that discussion. I would love if I could put these inside prerender hook somehow but unfortunately I couldn't find a solution for this yet.

[farnabaz]

Content module does not support SSR false by default because it highly depends on Nuxt pre-renderer to generate static pages. However, there is an experimental flag that you can use to enable client-side querying.

export default defineNuxtConfig({
  content: {
    experimental: {
      clientDb: true
    }
  }
})

Note that this is an experimental feature and may or may not have some minor breaking changes in the future.

[mrleblanc101]

@farnabaz What do you mean does not support SSR false ? SSR is not set to false in my config, but maybe yarn generate set it to false ? Static site generation is the main use case for nuxt-content. I'm not even sure why the API is called since the page is statically generated, all the info in already in the HTML.

[mrleblanc101]

For exemple, If you go on https://mrleblanc101.github.io/blog/2023-01-17-momentjs-avec-vitejs directly, the page crash. If you go to https://mrleblanc101.github.io/blog/ and click on the first article Utiliser moment.js locales dans un projet utilisant Vite.js, it work !

I don't understand why nuxt-content does an API call since I have no dynamic feature like a Search function. Why would it need to call an API if the page is statically generated ?

When I navigate from the blog page to a post, the query is: https://mrleblanc101.github.io/api/_content/query/L8Uhgu87AO.1674081216101.json?_params={%22surround%22:{%22query%22:%22/blog/2023-01-17-momentjs-avec-vitejs%22},%22where%22:[{%22_path%22:%22--REGEX+/^%5C%5C/blog/%22}],%22sort%22:[{%22_file%22:1,%22$numeric%22:true}]}

When I hard reload the page, the query is: https://mrleblanc101.github.io/api/_content/query/cFd5i6K2Vh.1674081216101.json?_params={%22surround%22:{%22query%22:%22/blog/2023-01-17-momentjs-avec-vitejs/%22},%22where%22:[{%22_path%22:%22--REGEX+/^%5C%5C/blog/%22}],%22sort%22:[{%22_file%22:1,%22$numeric%22:true}]}

The JSON file name don't match for some reason.

[mrleblanc101]

I'm stupid, sorry guys... I simply forgot to wrap my queryContent in a useAsyncData which explain why the query was made on the client-side even if my site is already generated.

[nlxdodge]

Content module does not support SSR false by default because it highly depends on Nuxt pre-renderer to generate static pages. However, there is an experimental flag that you can use to enable client-side querying.

export default defineNuxtConfig({
  content: {
    experimental: {
      clientDb: true
    }
  }
})

Note that this is an experimental feature and may or may not have some minor breaking changes in the future.

I cannot thank you enough for this temporarily fix. I already made my whole portfolio but this was the one part that wasn't working.

[mrleblanc101]

@nlxdodge Actually, you don't need to do this at all. I had the same issue. Since your app is pre-rendered, there shouldn't even be any API call. You probably just forgot the wrap your query content in an useAsyncData like I did.

[nlxdodge]

For example I have an index.md with some content and index.vue with:

<template>
  <ContentDoc v-slot="{ doc }">
    <Head>
      <Title>>{{ doc.title }}</Title>
      <Meta name="description" :content="doc.description" />
      <Meta name="keywords" :content="doc.keywords" />
    </Head>
    <ContentRenderer :value="doc" />
  </ContentDoc>
</template>

Without any Query. Then I would have to manually get the Query content for all pages?

[mrleblanc101]

@nlxdodge You didn't wrap your queryContent in useAsyncData here: https://github.com/nlxdodge/portfolio-nuxt/blob/d50136ff91765e1019cd3de51670a49d0e713156/pages/posts/index.vue#L69

[mohsin]

What do you mean does not support SSR false ?

@mrleblanc101 I said that? 😳

[mrleblanc101]

What do you mean does not support SSR false ?

@mrleblanc101 I said that? 😳

Sorry I tagged the wrong person

[farnabaz]

@mrleblanc101 As you can see in the issue, there is ssr: false in the Nuxt config. I don't have an idea about your project, so I can't tell whether this applies to you or not.

If you have an issue which is not the same as this one, feel free to open a new one

And as I said Nuxt Content depends on server APIs, disabling SSR will cause losing those APIs and as the result you will not be able to fetch any content

[mrleblanc101]

@farnabaz i thought SSR was always true when using generate (as the crawler is the "server-side"), but you are right. I think I'm mistaken, sorry.

You can have both when using generate: a static site with the HTML prerendered, or a static site with the HTML only in the JS bundle as render function.

[alexgil1994]

Content module does not support SSR false by default because it highly depends on Nuxt pre-renderer to generate static pages. However, there is an experimental flag that you can use to enable client-side querying.

export default defineNuxtConfig({
  content: {
    experimental: {
      clientDb: true
    }
  }
})

Note that this is an experimental feature and may or may not have some minor breaking changes in the future.

Having similar issues using ssg with ssr false (using Netlify for hosting). I tried setting this flag but it looks like the 404 errors keep happening for me when using queryContent. Has something changed with how one configures this clientDb experimental flag? (In dev mode and npm run build everything works.)

[florianjs]

If you got a Content not found. with Nuxt Content, try to explicitly add ssr: true to your config

export default defineNuxtConfig({
  ssr: true,
  ...
})

[alexgil1994]

If you got a Content not found. with Nuxt Content, try to explicitly add ssr: true to your config

export default defineNuxtConfig({
  ssr: true,
  ...
})

Thank you very much!

It worked now! Indeed it needed ssr true. It also needed useAsyncData use for the query request. At that point i made it work locally in generate mode but i saw that through Netlify hosting it still wasn't working. Looking further into the Nuxt docs i saw that in Nuxt 3 Nitro defines to the hosting providers what to run so in the hosting provider (Netlify in my case) the running command should be now npm run build instead of npm run generate that it was in the past.

(Wrote more details in case it helps anyone in the future since it's a combination of solutions mentioned in this issue and hosting configuration with Nuxt 3)

[mathijsfr]

What should you do if you have multiple route rules?

routeRules: {
        '/**': { prerender: true },
        '/blog/**': { ssr: true },
        '/blogs/**': { ssr: true },
        '/dashboard/**': { ssr: false },
        '/account/**': { ssr: false },
    },
    content: {
        experimental: {
          clientDb: true
        },
        markdown: {
          toc: { depth: 3, searchDepth: 3 }
        }
    },
    nitro: {
        prerender: {
          routes: ['/sitemap.xml']
        }
      },

This doesn't work for me with either yarn build or yarn generate.

[ParkBeomMin]

i have same issue.. how to fix? :(

[vietanhbui]

+1

[turkhero]

+1

[mklueh]

I'm facing this problem despite using

1. ssr: true
2. useAsyncData
3. clientDB: true

I've printed the results of the useAsyncData / queryContent call to the HTML using double brackets, and the content shows up.

Seems to be the ContentRenderer that has an issue

It's really a blocker and happens only on the production site, that was statically generated, not in dev

EDIT: It turned out, using useAsyncData was exactly the wrong thing to do. Using await queryContent without useAsyncData fixed it for me