I18n-module: Long loading time, when use 90 or more languages

[vodnicearv]

Version

v5.8.5

Reproduction link

Not really needed

Steps to reproduce

1. Create an app.
2. Add 10-20 routes.
3. Add 100 languages.

What is expected ?

Spped!

What is actually happening?

Slow loading app.

Additional comments?

What options (settings) is recoomend to use when in app is 92 languages?
Due to the fact that a huge number of routes (routes) are generated, each page is loaded for a very long time.

Can I somehow solve this problem?

For example, to make so that the routes are not automatically generated for each language ...
Thank you in advance.

_{This bug report is available on Nuxt community (#c222)}

[vodnicearv]

Maybe this pull request solve this problem?

[vodnicearv]

My nuxt.config.js:

modules: [
    [
      'nuxt-i18n',
      {
        defaultLocale: 'en',
        strategy: 'prefix',
        detectBrowserLanguage: {
          useCookie: true,
          alwaysRedirect: true,
          cookieKey: 'user_language'
        },
        seo: true,
        lazy: true,
        parsePages: true,
        vuex: {
          moduleName: 'i18n',
          mutations: {
            setLocale: 'I18N_SET_LOCALE',
            setMessages: 'I18N_SET_MESSAGES'
          },
          preserveState: false
        },
        langDir: 'locale/',
        locales: [...]
      }
    ]
  ]

[vodnicearv]

Any Ideas?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vodnicearv]

@paulgv hello,
will it be possible to solve this problem in future versions?

[sowinski]

Same problem here.
Actually I run 90 different domains. en.exmaple.com; fr.example.com etc.
At the end I just need to load for each "subdomain" only one language file. How can I do this?

[rchl]

@sowinski with lazy option enabled, only one (or max 2) languages are loaded.

@vodniciarv does no_prefix strategy fix your problem?

Also seo: true` can cause performance issues, depending on your page complexity.

[sowinski]

@rchl

Thank you for the fast response. I am very happy to get help! :)

I use server side rendering and have only one language per Domain.

Is it possible to just load the exact language which is necessary for each domain?

For example:
www.example.com => en
it.example.com => it
de.example.com => de
...

[rchl]

@sowinski configure your nuxt-i18n like described in https://nuxt-community.github.io/nuxt-i18n/lazy-load-translations.html

Only one language (or two if considering fallback language) is loaded that way.

[sowinski]

@rchl
Thank you. The solution works great!

[sowinski]

@rchl
There is one last problem. If I use lazyloading I see for one second the default language in the browser and after that everything is jumping to the other language.

Can I do this somehow on the server side?

I am using the differentDomains options.

[rchl]

@sowinski are you able to reproduce that in a minimal repo?
It shouldn't happen as server side should return page in proper language already and client side should block hydration until language files are loaded. So it would help if you could create small repro (maybe on codesandbox) or at least show your configuration of nuxt/nuxt-i18n.

[sowinski]

@rchl
Yes, I started to build a small repo and it worked. On my current server it is not working ...

Problem: I use Apache to proxy all calls to the "Nuxt" server. The "nuxt server" don't see the actual domain.
_.htaccess_

RewriteRule ^myapp/(.*) http://localhost:3000/myapp/$1 [P]
RewriteRule ^_nuxt/(.*) http://localhost:3000/_nuxt/$1 [P]

But Apache is adding a header where the traffic originally came from.

I use this also to add it to my store on server side.

xport const actions = {
  async nuxtServerInit({ dispatch }, context) {
    if (context.req.headers['x-forwarded-host']) {
      dispatch('setHostname', context.req.headers['x-forwarded-host'])
    } else {
      context.store.dispatch('setHostname', '10.8.0.1:8000')
    }
    await dispatch('websiteskeleton/getWebsiteSkeleton')
  },
  setHostname({ commit }, hostname) {
    commit('hostname', hostname)
  }
}

Can I use the information from: context.req.headers['x-forwarded-host']) and pass it to nuxt-i18n to choose the correct language?

[sowinski]

Found this: https://github.com/nuxt-community/nuxt-i18n/pull/92

forwardedHost: true
This solved the problem :) Everything is working fine, thank you :+1:

[sowinski]

On production I got this error:

[undefined] The differentDomains option and no_prefix strategy are not compatible. Change strategy or disable differentDomains option.
Why can I not use them together?

If I remove strategy completely from the config I got warnings like that now:

 WARN  [vue-router] Duplicate named routes definition: { name: "bookingrequests___de", path: "/bookingrequests" }                  18:40:36


 WARN  [vue-router] Duplicate named routes definition: { name: "locations___de", path: "/locations" }                              18:40:36


 WARN  [vue-router] Duplicate named routes definition: { name: "bookingrequests-trash___de", path: "/bookingrequests/trash" }      18:40:36


 WARN  [vue-router] Duplicate named routes definition: { name: "index___de", path: "" }                                            18:40:36


 WARN  [vue-router] Duplicate named routes definition: { name: "bookingrequests___de", path: "/bookingrequests" }                  18:45:48


 WARN  [vue-router] Duplicate named routes definition: { name: "locations___de", path: "/locations" }                              18:45:48


 WARN  [vue-router] Duplicate named routes definition: { name: "bookingrequests-trash___de", path: "/bookingrequests/trash" }      18:45:48


 WARN  [vue-router] Duplicate named routes definition: { name: "index___de", path: "" }                                            18:45:48


 WARN  [vue-router] Duplicate named routes definition: { name: "bookingrequests___de", path: "/bookingrequests" }                  18:45:53


 WARN  [vue-router] Duplicate named routes definition: { name: "locations___de", path: "/locations" }                      

[vodnicearv]

@vodniciarv does no_prefix strategy fix your problem?

@rchl yes, but we need prefix strategy

[vodnicearv]

As I understand it, is necessary to build routes differently in the .nuxt/router.js file

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vodnicearv]

Any ideas to solve it issue?

[rchl]

This was never analyzed properly so not sure exactly what was the problem here but it's likely the same as https://github.com/nuxt-community/nuxt-i18n/issues/690