CODEWITHSUNDEEP
nuxt.jsnuxt3.js
Evan Summers
Evan Summers

Reputation: 1212

How to make Nuxt 3 correctly build SSG pages + dynamic API routes?

I'm building a site which uses only a combination of statically generated pages and JSON API routes, with no runtime SSR of templates. I would like Nuxt to build it accordingly:

However, I can't figure out how to configure Nuxt to do this particular combination:

I'm on the nitro cloudflare preset. I've tried various combinations of routeRules, but I can't figure out how to get the behavior I want. Any ideas?

Upvotes: 2

Views: 2754

Answers (2)

Evan Summers
Evan Summers

Reputation: 1212

I was eventually able to get this working by configuring the underlying Nitro build in my nuxt.config.ts!

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

This causes nuxt build to crawl all links down from the front page and prerender, while still correctly outputting a worker.js to handle the /api routes at runtime.

Upvotes: 7

Hadi Majidi
Hadi Majidi

Reputation: 431

The simplest way is put your <div> in the template in <clientOnly> and use lazyfetch for getting data.

for generate,first make your _slug page and set in your generate. for example if you have 3 pages on blog route in nuxt 2 you should do this. I think in nuxt 3 is similar.

in nuxt.config

generate:{
 dir: 'your directory of generate',
 routes:()=>{
  return[
   '/blog/blog1_page',
   '/blog/blog2_page',
   '...'
  ]
}

Upvotes: 0

Related Questions