How to prerender Nuxt Content with nuxt build without Nuxt API Server round-trip?

[djimnz]

Hello,

I imported Nuxt Content into an existing Nuxt 3 project and could add my content correctly. Obviously, pages transition are pretty fast on local. But when deployed, it doesn't prerender the pages correctly.

Context

My deploy config uses nuxt build with some routesRules configurations to pre-render my homepage and content.
I have to use nuxt build for deploying on Netlify because I need the backend API server function for my email catcher form (If you have an idea on how I can have the server function deployed as well with nuxt generate, I will be glad to hear it).

My homepage is properly pre-rendered with its content from Contentful (Contentful content is fetched at built time). But each time I'm navigating via NuxtLink to my Nuxt Content pages /manifesto and /policies/**, it need to call the backend server function to get its content, such as this GET example from the browser network tab:

Duration: ~80-300ms on average
Request URL:
https://.../api/_content/query/sp8Q7AzBGr.1692677127791.json?_params=%7B%22first%22:true,%22where%22:%5B%7B%22_path%22:%22/policies/terms%22%7D%5D,%22sort%22:%5B%7B%22_file%22:1,%22$numeric%22:true%7D%5D%7D

Here is my nuxt.config.ts configuration:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  telemetry: false,
  spaLoadingTemplate: false,
  routeRules: {
    "/": { prerender: true, isr: true },
    "/manifesto": { prerender: true, isr: true },
    "/policies/**": { prerender: true, isr: true },
  },
  modules: [
    "@nuxt/image",
    "@nuxt/content",
  ],
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/manifesto", "/policies/terms", "/policies/privacy"],
    },
    // ...
    ],
  },
  // ...
  image: {
    provider: "netlify",
  },
});

Page component pages/policies/[...slug].vue:

<template>
  <div class="container mx-auto pt-28">
      <ContentDoc />
  </div>
</template>

Questions

1. How to make my Nuxt Content get its content at build time using nuxt build and remove the needs of my app to load it between navigations? As you can see, I have tried to add them on routeRules and nitro.prerender config, but none of them seem to give me the result I'm looking for.

2. Not related to Nuxt Content, but someone know how to still have the server function deployed even if I'm using nuxt generate as my deployment build method? When using nuxt generate all my pages are blazing fast, and Nuxt Content page already have all the required content - no need to round-trip with the backend. But then, I cannot use my Nuxt API endpoints :(

Thank you so much for your reading time and your feedback.

[jonkuze]

@djimnz have you found a solution for this? I'm looking to do the same.

[djimnz]

Sorry, I haven't checked since then!

[7iomka]

Same issue

[Mgoeloe]

same here

[nwittwer]

@farnabaz Would appreciate your thoughts on accomplishing this!

Getting the best of both worlds:

• the speed of the SSG pages from nuxt generate
• able to deploy to static site hosts like Netlify
• not needing to setup a separate DB (client-side WASM SQlite DB for Nuxt Content v3)
• all the other benefits of using nuxt build and running on the server (API requests, some SSR pages, etc.)