Content API giving 404 on generate build

[Tragio]

Environment

• Operating System: Darwin
• Node Version: v16.18.0
• Nuxt Version: 3.4.3
• Nitro Version: 2.4.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: modules
• Runtime Modules: @nuxt/content@2.6.0
• Build Modules: -

Reproduction

https://github.com/Tragio/nuxt-content-repro

yarn generate && yarn preview first selects works, and subsequent selects return 404.

yarn dev / yarn build works just fine.

Describe the bug

Nuxt Content with filter works just fine on dev, but as soon I generate the build it stops working properly.

Already tried all solutions provided here: #1798

Additional context

No response

Logs

No response

CC: @farnabaz

[farnabaz]

You are generating a static website, which means that there will be no APIs. When you change the select input content will execute query and requests server to get the right data, but instead of data it receives 404.

You should enable the experimental clientdb feature to allow the content module to run queries inside the browser

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

[jeffreyvdhondel]

You are generating a static website, which means that there will be no APIs. When you change the select input content will execute query and requests server to get the right data, but instead of data it receives 404.

You should enable the experimental clientdb feature to allow the content module to run queries inside the browser

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

Having the same problem as @Tragio this experimental clientdb setting doesn't fix my problem still getting an 404.

[Tragio]

@farnabaz thank you very much for your reply 🙏 yes I have tried that before creating this issue.

By putting that in my code reproduction has exactly the same outcome, like @jeffreyvdhondel also has.

[farnabaz]

I see,
Sorry for my partial explanation
Currently module does not support hybrid mode, which means that you can only use it on full SSG or without SSR
so if you want to use client-side querying, you need to disable SSR

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

I can imagine this is not exactly what you want to do, But the hybrid feature is yet to be implemented, thats why clientDB also is in experimental mode

[jeffreyvdhondel]

But for what i understand we both don't want to use hybrid mode but just full static. But that doesn't pre-render component logic?

[farnabaz]

Content module creates a list out of all queries that executed in generation phase and store them as static files.
But as you can see in this example, queries for Team A, Team B and Team C won't execute in generation. They will execute only if user select a value from select input. In situations like this, there is no way for module to guess the query.

[jeffreyvdhondel]

But if you look into to cached json file the data is there.

[farnabaz]

Indeed, cached json is just a list of all contents. In production (inside server API) it is used to find the corresponding files based on query.
But in SSG there is no server API to find the contents. So all the queries should store as separate file in generation phase.

[Tragio]

@farnabaz so we can't use nuxi generate in any way, right? At the moment my requirement was to have a static server.

I tried nuxi generate with the following and the result was the same.

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

[tomhuntley]

@Tragio it's working for me using these settings (note the casing on clientDB)

export default defineNuxtConfig({
  ssr: false,
  content: {
    experimental: {
      clientDB: true
    }
  }
})

[jeffreyvdhondel]

Yeah that was the issue :)

[Tragio]

Ahh it was a copy-paste issue 😋 for me it is also working. @farnabaz I was about to create a PR, but not sure if nitro.preset: 'service-worker' does anything for the static deployment. If it should be replaced for what is there or added 🤔 maybe would be better for you to update the docs 🙏

defineNuxtConfig({
  ssr: false,
  nitro: {
    preset: 'service-worker'
  }
})

by:

defineNuxtConfig({
  ssr: false,
  content: {
    experimental: {
      clientDB: true
    }
  }
})

[semiaddict]

I am facing the same issue with a search page that accepts user input via a text field to perform a search on the contents.
The experimental clientDB fixes the issue, but degrades SEO as SSR has to be fully disabled.

It would be great to be able to force using the clientDB per query while still using SSR.
I'll try to get this done for the project I'm working on.

[philkaracho]

I'm at the same stage as @semiaddict - I'm building a company website with mostly static content. Don't want to disable SSR globally but need to implement a search page with user input.

Would be great if someone came up with a solution.

[semiaddict]

@philkaracho, after looking at the code responsible for using the clientDB, it seems too big a trouble to get it working for my use case as the client-db code is not exported and can't be used outside the content module, and the corresponding composables are also not auto-imported.

Since I only needed this in the search page, I opted for adding the necessary data from the content in the search index.
FYI, I am using MiniSearch, which allows adding extra data to the indexed content.