Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pre-rendering multiple routes with i18n #3080

Open
2 of 4 tasks
ExEr7um opened this issue Aug 30, 2024 · 4 comments
Open
2 of 4 tasks

Pre-rendering multiple routes with i18n #3080

ExEr7um opened this issue Aug 30, 2024 · 4 comments

Comments

@ExEr7um
Copy link
Contributor

ExEr7um commented Aug 30, 2024

Describe the feature

Basically, I have some routes that I need to prerender for 7 different locales: /login, /login/sign-up, /login/forgot-password.

First, I tried to pre-render them using route rules:

routeRules: {
  "/login/**": {
    prerender: true,
  },
},

However, that didn’t work because, as stated in the Nuxt documentation, pages should be linked from other pages:

Everything under /blog gets prerendered as long as it is linked to from another page.

All my pages are linked, but they are linked using localePath, and I believe that because of this, the pre-renderer does not recognize that they are linked.

I found a workaround by manually adding routes to the Nitro pre-renderer array:

nitro: {
  prerender: {
    routes: [
      "/login",
      "/login/forgot-password",
      "/login/sign-up",
    ],
  },
},

This method successfully prerendered all routes, but only for my default locale. If I want to prerender all locales, I need to manually add each one to that array. With 7 different locales, I would need to add 21 different routes manually, which seems like poor UX.

Additional information

  • Would you be willing to help implement this feature?
  • Could this feature be implemented as a module?

Final checks

@AndersCV
Copy link

AndersCV commented Sep 2, 2024

Do you have a LanguageSelector component that the crawler can use to detect your other locales and discover them correctly that way?

https://i18n.nuxtjs.org/docs/guide/lang-switcher

@ExEr7um
Copy link
Contributor Author

ExEr7um commented Sep 2, 2024

Do you have a LanguageSelector component that the crawler can use to detect your other locales and discover them correctly that way?

https://i18n.nuxtjs.org/docs/guide/lang-switcher

I do, but since it’s a dropdown, the links to other locales are not present in the initial HTML.

@AndersCV
Copy link

AndersCV commented Sep 3, 2024

Then I'd suggest to include them in the initial HTML and show/hide them using v-show instead of v-if.
This should enable your crawler to reach those pages and solve your issue.

Perhaps extend your dropdown component with a prop to control how the dropdown items are rendered.

@BobbieGoede
Copy link
Collaborator

Adding link based language switchers would be the recommended way to resolve your issue as already suggested, this is likely better for SEO as well.

We can probably add some way to ensure each localized version of a page is pre-rendered (but should make sure not to unnecessarily prerender pages) so I'm keeping this issue open for now, if there is more demand I can look into it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants