SSG with crawling pages that use async slugs for routes from a CMS #3184
Unanswered
WaldemarEnns
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
Hello there! My setup is quite easy:
ℹ See details and code below.
I use SSG for generating my
/posts
route, which contains aNuxtLink
/NuxtLinkLocale
to redirect to the/posts/[slug].vue
page, where theslug
is a value that I fetch usinguseAsyncData
fom my CMS. The slug is a translated string.My issue: Whenever I execute
npm run generate
, my/posts
page is being crawled by the nitro crawler (due toSSG
-> see https://nuxt.com/docs/getting-started/prerendering#crawl-based-pre-rendering) and then the output is basically all possible combinations of /{locale}/posts/{slug} instead of only using the correct slugs for the correct current locale.Example: Expected output
Example: Actual output
As you will notice: I am adding custom prerender routes to my
nuxt.config.ts
in a prerender hook to allow my dynamic and translated blog-post pages to be prerendered as well.What I noticed
I noticed that due to how nuxt-i18n works, the nitro-crawler crawls the
/posts
page and notices theNuxtLink
component. It then renders the/posts
page for each availablelocale
but does not effectively wait foruseAsyncData
to retrieve the correct posts slug to use it for each individual locale - so I end up with all slugs being passed around to all locales, resulting in all possible combinations being prerendered (see output below).Commenting out that
NuxtLink
results in my/posts
pages being prerendered correctly but of course, my/posts/[slug].vue
pages are not prerendered at all (I am wondering why, since I have added those routes within my nitro prerender hook?).Code examples
nuxt.config.ts
/pages/posts/index.vue
/pages/posts/[slug].vue
Executing
npm run generate
resolves in the following output:Beta Was this translation helpful? Give feedback.
All reactions