Prerendering routes with npm run generate leads to wrong prerender results

WaldemarEnns / portfolio

My personal portfolio.

0 stars 0 forks source link

Prerendering routes with npm run generate leads to wrong prerender results #12

Open WaldemarEnns opened 3 weeks ago

WaldemarEnns commented 3 weeks ago

Running npm run build outputs the correct prerendered sites:

/posts/schoen-dass-du-hier-bist
/en/posts/nice-to-meet-you
/es/posts/bienvenido

Running npm run generate outputs the following prerendered sites:

/posts/schoen-dass-du-hier-bist
/posts/nice-to-meet-you
/posts/bienvenido
/en/posts/nice-to-meet-you
/en/posts/schoen-dass-du-hier-bist
/es/posts/schoen-dass-du-hier-bist
...

There seems to be an issue that appears when running npm run generate with the prerender rules. Using npx nuxt build --preset github_pages leads to the same issues as npm run generate.

WaldemarEnns commented 3 weeks ago

It seems like this part on the Footer component makes trouble in the prerender phase:

<!-- <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
          {{ locale.name }}
        </NuxtLink> -->

Commenting it out leads to correct results.

WaldemarEnns commented 3 weeks ago

After some reading, I noticed that the i18n-nuxt documentation mentions this configuration:

skipSettingLocaleOnNavigate: true

Here are the docs: https://i18n.nuxtjs.org/docs/guide/lang-switcher#wait-for-page-transition

But that introduces a new issue:

When clicking the footers language-swicher (e.g. currently at DE now switching by clicking the English link) - the route updates correctly but my content is still german. It only takes effect when reloading the page (since the path is changed, the reload now correctly renders the english content).

After some more thinking, I came to the following point:

When using the language-switcher, only the content of the current locale is fetched by strapi. Thus, the links can only contain the current languages slugs, until the strapi content is being re-fetched properly.

I possible fix could be to use a computed property that dynamically updates the slug to the currently selected language (using locale.value).