content 404 Not Found

trafficstars

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

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

Jan 06 '23 10:01 mydracula

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.

Jan 07 '23 09:01 mohsin

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.

Jan 16 '23 11:01 farnabaz

@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.

Jan 18 '23 22:01 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.

Jan 18 '23 23:01 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.

Jan 19 '23 02:01 mrleblanc101

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.

Jan 22 '23 18:01 nlxdodge

@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.

Jan 22 '23 18:01 mrleblanc101

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?

Jan 22 '23 18:01 nlxdodge

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

Jan 22 '23 18:01 mrleblanc101

What do you mean does not support SSR false ?

@mrleblanc101 I said that? 😳

Jan 23 '23 16:01 mohsin

What do you mean does not support SSR false ?

@mrleblanc101 I said that? 😳

Sorry I tagged the wrong person

Jan 23 '23 16:01 mrleblanc101

@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

Jan 23 '23 17:01 farnabaz

@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.

Jan 23 '23 17:01 mrleblanc101

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.)

Feb 25 '23 21:02 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,
  ...
})

Mar 01 '23 13:03 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,
  ...
})

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)

Mar 12 '23 12:03 alexgil1994

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.