Building content with nitro preset 'cloudflare' is not prerendering routes as expected

[BernardoSM]

Environment

• Operating System: Linux
• Node Version: v19.6.0
• Nuxt Version: 3.7.3
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: pnpm@8.6.9
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

nuxt.config.ts: https://github.com/menthorlabs/menthor/blob/10-check-multiple-server-requests-when-load-a-lesson/apps/app/nuxt.config.ts

[...slug].vue: https://github.com/menthorlabs/menthor/blob/10-check-multiple-server-requests-when-load-a-lesson/apps/app/pages/%5B...slug%5D.vue

Live version with preset cloudflare deployed: https://dev.menthor.io/app/twitter-descentralizado/introducao/o-que-voce-vai-aprender

Describe the bug

Hi guys, I'm trying to reproduce the exact way nuxt content is prerendering all docs pages like this nuxt.config.js and this [...slug].vue but when I add nitro preset cloudflare things are not working as expected.

Building with prerender enabled and with NO preset these are the generated files:

Building with prerender and with cloudflare preset enabled these are the generated files:

But Bernardo, why this is bad? These are just different ways to prepare build files for production.

No. It's not. When your prerender pages with cloudflare preset enabled, they're not being really prerendered,

If you open some prerendered page, is still doing the three useAsyncData requests from [...slug].vue file as you can see here:

So the question is: am I missing something or is impossible to really prerender pages with preset cloudflare enabled?

Additional context

No response

Logs

No response

[Barbapapazes]

Hello @BernardoSM !

Which command do you use to build your website?

[BernardoSM]

Hey @Barbapapazes I'm using pnpm build (this means that is not pnpm generate). As I'm using turborepo, I need to specify which app I want to build, so in my case is pnpm build --filter=app.

[imaginarny]

Try to add this to your nuxt config to prerender, while keeping the same build script and preset:

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/'],
    ignore: ["/api"]
  }
}

You won't eliminate those request though as they are there to hydrate the app. Also it does not fully behave like when you use generate, or other static preset.

Keep in mind though, that Cloudflare has a free limit of 100 total for route rules and 100 max chars per route, so if you have a content (routes) heavy website, it might be a problem. Check your generated _routes.json afterwards. It should be possible to override it with nitro.cloudflare.pages.routes option with more glob routes opposed to the exact generated ones, according to docs, but currently it just extends instead..

Alternatively, if you don't have any server routes, you could try a cloudflare_pages_static preset. You will still have a few _payload.json requests, but should be less than now. And there won't be _routes.json generated/necessary.

Outside of Cloudflare preset, I am also experiencing many duplicated content query requests, especially those used right in components like <ContentQuery> or etc., that gets triggered even while staying on the same route. I'm considering replacing them all with queryContent() composable to have more control over it and reuse where possible.

I also thought deploying to static hosting would be less requests-heavy. And that there will be more options for e.g. SSG with dynamic api route build. Also while existing not working as they should?

[BernardoSM]

@imaginarny thanks for your answer, I got all your points.

Just one last question, is it possible to have a SSR but with some pages prerendered (loading almost instant)?

My goal is to have some pages prerendered like cloudflare_pages_static is doing or when I run pnpm generate with crawlLinks enabled but also have SSR features like api, dynamic og images, etc.

[dtogias]

i have the same question. Prerender does not seem to be working as expected.