Nuxt 3 Static Site Generation does not generate anything for content

[davidcrandall99]

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v19.1.0`
- Nuxt Version:     `3.1.1`
- Nitro Version:    `2.1.0`
- Package Manager:  `npm@8.19.3`
- Builder:          `vite`
- User Config:      `routeRules`, `ssr`, `postcss`, `app`, `modules`, `content`, `runtimeConfig`
- Runtime Modules:  `@nuxt/content@2.4.3`
- Build Modules:    `-`
------------------------------

Reproduction

Create a nuxt 3 project and add a /content directory

Add any .md to the /content directory

Run npx nuxi generate

Instead of static content actually being generated, an /api/_content/<query or navigation>/<somestring>.json file is created.

This means that the statement You can now deploy .output/public to any static hosting! is false; you cannot simply upload the contents of .output/public and expect it to work; you need a server with routing back to the main index.html.

This negates any SEO benefit for using the /content with Nuxt 3

Describe the bug

As stated, using generate does not generate any static content from the /content directory, negating any SEO benefit. Ideally, anything in .output/public could be uploaded to, say, S3 with static website hosting enabled, and it would work.

The fact it outputs JSON files and expects all requests to route back to the main index.html file means that:

1. The content is not static, it needs to fetch data asynchronously from the server, even if that data is static JSON
2. Any SEO benefit that existed in Nuxt 2 using generate no longer exists in Nuxt 3.

Is there something I'm missing? This should be working if we're calling this "stable", no?

Additional context

No response

Logs

No response

[davidcrandall99]

NOTE: A workaround for this is to manually define every route in nuxt.config.ts, like:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/every', '/single', '/route', '/that', '/has', '/ever', '/existed']
    }
  }
})

To be honest, this is tedious; the only way to get around this is to write something that crawls the content in the /content directory and adds it to this config. Which...why doesn't nuxt 3 just do it outright?

[nobkd]

This https://github.com/nuxt/content/issues/1551#issuecomment-1257259265 might be an answer to your problem.

[funkel1989]

@nobkd I looked at that comment and it doesn't feel like that is accurate. I have a similar problem but the issue I'm having is my md files are references other md files, which means there links on the site are not getting crawled. This is very common in the documentation world where a non developer will stand up a doc site following example and just expect it to work only ever adding markdown files.

[davidbernegger]

@davidcrandall99, Yeah, was asking that myself too, so if you want to prerender these routes automatically I have this solution, even if nuxt / nuxt/content does not do it out of the box: https://github.com/nuxt/content/issues/1551#issuecomment-1470246543

maybe @Atinux knows more about the crawling process?

[atinux]

Normally running nuxt generate will enable the crawling of Nitro so you won't have anything to do.

[WhalenSITHS]

I cannot get Nuxt to generate my markdown files. Frustrating because my old blog on Nuxt 2 worked way more easily.

[atinux]

We actually generate our docs with Content and it works perfectly.

Happy to help but we will need a reproduction, cannot guess without looking at the code

[Hebilicious]

@Atinux is this related to https://github.com/nuxt/content/issues/1229 ?

[mrniamster]

Is there a work around this yet? this was possble in nuxt 2, whats wrong ??

[lethak]

Facing this with a fresh install, kinda negates why I chose Nuxt in the first place

[Hebilicious]

You should be able to have static content generated by using the Nitro static presets. You can find a few solutions in this thread regarding how to configure the pre-render for your content. https://github.com/nuxt/content/issues/1551

[mrniamster]

@Hebilicious Expecting a potential reply from you regarding the solution suggested, Why do we have to generate routes manually ? isn't it loosing expectation from a framework, when we have to define the crawler isntead of being it automatic....

It was working in nuxt 2,

[Hebilicious]

@mrniamster While this is indeed not ideal, this workaround should cover your needs. Feedback and PRs are welcome to improve Nuxt content.

[atinux]

Are you using the documentDriven mode?

If not, the files inside content/ are not always mapped to a route so it is not possible to automatically generate the routes for those.

[Barbapapazes]

@Hebilicious Expecting a potential reply from you regarding the solution suggested, Why do we have to generate routes manually ? isn't it loosing expectation from a framework, when we have to define the crawler isntead of being it automatic....

It was working in nuxt 2,

Have you tried to use the crawlLinks from Nitro (https://nitro.unjs.io/config#prerender). This option will get every anchor from your page and navigate trough your site to prerender pages.

[mrniamster]

@Atinux Thanks Sabastien for help , but wondering how this was possible in nuxt 2 , Yes i was using documentDriven any workaround for this ?

@Barbapapazes
Yes I have set it to true by default, but it doesn't crawl the /content pages
Here is my directory :

/Content 
- /docs/.   <- i want it to crawal all files inside it.
---/index.md

[Barbapapazes]

I think there is a miss understanding of how nuxt/content works.

/content is like a database where you can store Markdown, JSON, CSV and more. Alone, they do nothing and they do not represent a page. But nuxt/content gives us a tool to query this database called queryContent.

Nitro, on its side, will start at / (from your server so <ip>:<port>/) and crawls into your site using anchor tags. So Nitro is not aware of the /content folder (which is like database).

Knowing this, we understand that you have 3 solutions:

• Adding navigation links in your / to crawling by Nitro
• Adding manually your path into the prerender routes array
• Create a Nitro plugin which add routes (querying using nuxt/content) to the prerender routes array

[mrniamster]

Thanks @Barbapapazes I actually tried the hook method which does the job right now ,

hooks: { 
    async 'nitro:config'(nitroConfig: any) {
       if (nitroConfig.dev) {
         return
      }
      let slugs = await getPostRoutes();
       nitroConfig.prerender.routes.push(...slugs)
       return
     }
   },

Coming to this

Adding navigation links in your /  to crawling by Nitro

So you mean linking my /content routes to any <a/> or <NuxtLink/> to any of my /pages will be enough? Would love to try this out! Thanks for the information, well explained

[Barbapapazes]

When Nitro crawls your website, it does the same job that is done by a Google Bot (https://developers.google.com/search/docs/crawling-indexing/googlebot).

1. Nitro request your serveur
2. Nitro find every anchor tag and get the href
3. Nitro request each href found in the previous step and return to step 2 recursively

You can take a look at Docus, https://github.com/nuxt-themes/docus or Alpine, https://github.com/nuxt-themes/alpine, to understand how things works.