Dynamic pages and SSG about vite-plugin-pages

[hannoeru]

Fixed in 0.9.6

[bfourgeaud]

Hello,

I am facing the same problem. Would someone have any example how to use that includedRoutes option to build pages from an api call ?
I would have to retrieve all the dynamic pages before building in order to have ServerSideGenreration on these dynamic pages and make these pages SEO friendly ...

Thank you very much !

[hannoeru]

vite-ssg will take routes array from vite-plugin-pages, so if you use vite-plugin-pages's onRoutesGenerated hook you can replace /[id].vue dynamic route to static route from 1-10 then vite-ssg will rander it.

[husayt]

Thanks, that has worked, but there is one issue.
Before for a page [id].vue I could access id through props, but not anymore. So the following stopped working

const props = defineProps({
 id: {
    type: String,
    default: "1",
  },
})

[hannoeru]

Umm, if you need props from dynamic route, the original way is better.
keep dynamic route & use vite-ssg's includedRoutes option to generate it.
Nuxt.js is also doing that way.

[husayt]

Thanks. Good to know that two options are available.

[husayt]

Hi @hannoeru there is a bug with onRoutesGenerated. Each time it;s being called in dev it passes routes from previous call.
So if there were 5 routes initially and I added 10 inside onRoutesGenerated. On second call routes have 15 items, on third call 25 and so on.

[husayt]

Thank you

[joshbmarshall]

I use something like this:

export async function includedRoutes(paths, routes) {
  const newroutes = []
  for (let i = 0; i < routes.length; i++) {
    const route = routes[i]
    if (route.path.includes(':')) {
      // I don't want any pages with variables rendered, will add them manually below
      continue
    }
    if (route.path == '/gallery') {
      // I don't want the gallery page rendered
      continue
    }
    newroutes.push(route.path)
  }

  const products = (await axios.get('/api/call/list/of/products')).data.map(item => `/product/${item.slug}`)
  for (let a = 0; a < products.length; a++) {
    newroutes.push(products[a])
  }

  return newroutes
}