SSR Generation & Dynamic Routes with multiple languages

[Pfenya]

Hi,
i have been banging my head against this all day but cannot get it to work. I have tried searching here and via google and reading a bunch of documentation but nothing seems to be covering my case - or just passing over the piece of the puzzle i am missing.

I am building a website using Nuxt v3.10.3 with Strapi as a headless CMS. I have multiple locales and page names can be different per locale (also not all pages may be available in every locale).

I added @nuxtjs/i18n in version 8.1.1 to my project and added some basic configuration to my nuxt.config.ts file:

i18n: {
    customRoutes: 'config',
    strategy: 'prefix_and_default',
    defaultLocale: 'de-DE',
    detectBrowserLanguage: false,
    dynamicRouteParams: true,

    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      {
        code: 'pl',
        domain: localeDomains.pl,
        domainDefault: true
      },
      {
        code: 'cs',
        domain: localeDomains.pl,
        domainDefault: true
      },
      {
        code: 'de-DE',
        domain: localeDomains.de
      },
      {
        code: 'en',
        domain: localeDomains.de
      },
      {
        code: 'nl',
        domain: localeDomains.de
      },
    ]
  }

In my dynamic page template [...slug].vue I set it up to fetch the locale from use18n and use that in conjunction with the url without the locale prefix to fetch the page information from strapi:

const { locale : i18nLocale } = useI18n();
const route = useRoute()

const locale = i18nLocale.value;

let routeName = route.path;
if(routeName.startsWith("/")){
  routeName = routeName.substring(1)
}

if(routeName.startsWith(locale)){
  // would be pl/dywany - so removing locale plus the slash
  routeName = routeName.substring(locale.length+1)
}

  const pageKey = "pages::"+routeName+"::"+locale;
const { data: pagesData} = await useAsyncData<ApiPagePage>(
  pageKey, 
  () => find<ApiPagePage>('pages', pageParams),
  {
  getCachedData(pageKey){
    return nuxtApp.payload.data[pageKey] || nuxtApp.static.data[pageKey]
  }
  }
)
....

this works fine if I use npm nuxt dev to view the pages, it recognises the prefix and fetches the correct information based on that.

However, the goal is to pre-render the whole page and only deploy the static HTML pages. Since i am dealing with dynamic routes, I am fetching them and adding them to the nitro router:

async function  getDynamicPages() {
  var pages = []
  const { data } = await axios.get(strapiBaseUri + "/api/pages?sort[0]=title:asc&pagination[pageSize]=1000&pagination[page]=1&publicationState=live&locale=all");
  
  data.data.map((page) => {
      l
      pages.push(
        "/"+page.attributes.locale+'/'+page.attributes.slug
      )
      
    })
  
  console.log(pages);
  return pages;
}
.....


  hooks: {
    async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) return
  
      let slugs = await getDynamicPages();
      nitroConfig.prerender.routes.push(...slugs);
      return
    },
  },

I can see all of the pages in the slug list when I use nuxi generate but the locale returned from useI18n remains on de-DE and all pages with a different locale string at the beginning return a 404 and do not get generated. I have tried several ideas on how to generate these but so far I have been unable to get it to work.

Does anyone have any input of how this would need to be done? Or will I need to overwrite the locale again in my page before fetching the data?

Thanks

Update: I assumed the defaultLocale was being used but I changed that to 'cs' just now but it is still the 'de-DE' pages it can find, not the rest. All of this is happening in docker containers

[Pfenya]

Found an answer - or at least one on the way. The locale config seems to be the cause of the problem. I updated it to a simple list and that worked:

    differentDomains: false,
    locales: ['de-DE','pl','cs','en-IE','nl','es', 'de-AT','hr', 'sk']

[Pfenya]

Can confirm that it is the domains part that makes this not work for me. One sentence in the documentation caught my eye with the info now in mind:

differentDomains
Set this to true when using different domains for each locale. If enabled, no prefix is added to your routes and you MUST configure locales as an array of objects, each containing a domain key.

With it hard-coded to no it works, with it set to differentDomains: (process.env.NODE_ENV === 'production') it fails. Meaning the actual question becomes: is there a way to combine different domains with dynamic routes and multiple locales when generating? or do i need to alter my setup to generate per domain.

[Pfenya]

I ended up doing separate docker containers per domain to be generated and setting the locales for each via environmental variables so that i can re-use the docker image but generate the different versions and also limit the dynamic routes to those for each domain by iterating over the locales I actively need.

const locales = process.env.LOCALES;
const localesArray = locales.split(",");


function getLocales(){
   let localesOut = locales.split(",");
  return localesOut;
}

  i18n: {
    customRoutes: 'config',
    strategy: 'prefix_except_default',
    defaultLocale: localesArray[0],
    detectBrowserLanguage: false,
    dynamicRouteParams: true,
    differentDomains: false,
    locales: getLocales()
      
  }

[WaldemarEnns]

I have the same issue but using different docker-images is no solution for me, since I am using GitHub pages for deploying my static pages. I also used a hook to add my strapi-post-pages dynamically (taking the posts locale into account) to my list of prerendered routes.

My issue: When running npm run generate, my prerendered routes are always resulting into generating the correct paths and routes for my translations like en and es but also my default locale de generates paths for all translations.

Just have a look here:

nuxt.config.ts hook

hooks: {
    async 'prerender:routes'(ctx) {
      const strapiUrl = process.env.STRAPI_URL || 'http://localhost:1337'
      const postsResponse = await fetch(`${strapiUrl}/api/posts?publicationState=preview&locale=all&pagination[page]=1&pagination[pageSize=1000]`)
      const posts: Strapi4ResponseMany<Post> = await postsResponse.json()

      const routes = posts.data.map((post: Strapi4ResponseData<Post>) => {
        const locale = post.attributes.locale
        const slug = post.attributes.slug

        if (locale === 'de') {
          return `/posts/${slug}`
        } else {
          return `/${locale}/posts/${slug}`
        }
      })

      for (const route of routes) {
        ctx.routes.add(route)
      }
    }
  }

generated output

ℹ Initializing prerenderer                                                                                                                                                                nitro 08:20:32

[08:20:33]  WARN  Export "useNitroApp" of module "node_modules/nitropack/dist/runtime/app.mjs" was reexported through module "node_modules/nitropack/dist/runtime/index.mjs" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "node_modules/@nuxtjs/sitemap/dist/runtime/nitro/routes/sitemap_index.xml.js" to point directly to the exporting module or reconfigure "output.manualChunks" to ensure these modules end up in the same chunk.

ℹ Prerendering 10 initial routes with crawler                                                                                                                                             nitro 08:20:34
  ├─ /robots.txt (26ms)                                                                                                                                                                    nitro 08:20:34
  ├─ /__sitemap__/style.xsl (9ms)                                                                                                                                                          nitro 08:20:34
  ├─ /200.html (104ms)                                                                                                                                                                     nitro 08:20:34
  ├─ /404.html (100ms)                                                                                                                                                                     nitro 08:20:34
  ├─ /imprint (247ms)                                                                                                                                                                      nitro 08:20:34
  ├─ / (249ms)                                                                                                                                                                             nitro 08:20:34
  ├─ /privacy-policy (246ms)                                                                                                                                                               nitro 08:20:34
  ├─ /imprint/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (57ms) (skipped)                                                                                                          nitro 08:20:34
  ├─ /_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (4ms) (skipped)                                                                                                                   nitro 08:20:34
  ├─ /privacy-policy/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (4ms) (skipped)                                                                                                    nitro 08:20:34
  ├─ /posts/schoen-dass-du-hier-bist (229ms)                                                                                                                                               nitro 08:20:34
  ├─ /posts/schoen-dass-du-hier-bist/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (21ms) (skipped)                                                                                   nitro 08:20:34
  ├─ /es/posts/bienvenido (246ms)                                                                                                                                                          nitro 08:20:34
  ├─ /en/posts/nice-to-meet-you (244ms)                                                                                                                                                    nitro 08:20:34
  ├─ /imprint/_payload.json (4ms)                                                                                                                                                          nitro 08:20:34
  ├─ /_payload.json (4ms)                                                                                                                                                                  nitro 08:20:34
  ├─ /es/posts/bienvenido/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (17ms) (skipped)                                                                                              nitro 08:20:34
  ├─ /en/imprint (90ms)                                                                                                                                                                    nitro 08:20:34
  ├─ /es/imprint (83ms)                                                                                                                                                                    nitro 08:20:34
  ├─ /en/privacy-policy (47ms)                                                                                                                                                             nitro 08:20:34
  ├─ /privacy-policy/_payload.json (3ms)                                                                                                                                                   nitro 08:20:34
  ├─ /en/posts/nice-to-meet-you/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (6ms) (skipped)                                                                                         nitro 08:20:34
  ├─ /en (68ms)                                                                                                                                                                            nitro 08:20:34
  ├─ /es (58ms)                                                                                                                                                                            nitro 08:20:34
  ├─ /en/imprint/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (17ms) (skipped)                                                                                                       nitro 08:20:34
  ├─ /es/imprint/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (13ms) (skipped)                                                                                                       nitro 08:20:34
  ├─ /en/privacy-policy/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (11ms) (skipped)                                                                                                nitro 08:20:34
  ├─ /posts/schoen-dass-du-hier-bist/_payload.json (19ms)                                                                                                                                  nitro 08:20:34
  ├─ /en/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (8ms) (skipped)                                                                                                                nitro 08:20:34
  ├─ /es/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (5ms) (skipped)                                                                                                                nitro 08:20:34
  ├─ /index-sitemap.xml (5ms)                                                                                                                                                              nitro 08:20:34
  ├─ /de-DE-sitemap.xml (5ms)                                                                                                                                                              nitro 08:20:34
  ├─ /es/posts/bienvenido/_payload.json (5ms)                                                                                                                                              nitro 08:20:34
  ├─ /sitemap.xml (4ms)                                                                                                                                                                    nitro 08:20:34
  ├─ /en-US-sitemap.xml (5ms)                                                                                                                                                              nitro 08:20:34
  ├─ /es-ES-sitemap.xml (5ms)                                                                                                                                                              nitro 08:20:34
  ├─ /en/posts/nice-to-meet-you/_payload.json (5ms)                                                                                                                                        nitro 08:20:34
  ├─ /es/privacy-policy (40ms)                                                                                                                                                             nitro 08:20:34
  ├─ /posts (162ms)                                                                                                                                                                        nitro 08:20:34
  ├─ /en/imprint/_payload.json (15ms)                                                                                                                                                      nitro 08:20:34
  ├─ /en/privacy-policy/_payload.json (10ms)                                                                                                                                               nitro 08:20:34
  ├─ /en/_payload.json (7ms)                                                                                                                                                               nitro 08:20:34
  ├─ /es/posts (129ms)                                                                                                                                                                     nitro 08:20:34
  ├─ /es/_payload.json (4ms)                                                                                                                                                               nitro 08:20:34
  ├─ /es/imprint/_payload.json (12ms)                                                                                                                                                      nitro 08:20:34
  ├─ /en/posts (132ms)                                                                                                                                                                     nitro 08:20:34
  ├─ /es/privacy-policy/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (6ms) (skipped)                                                                                                 nitro 08:20:34
  ├─ /posts/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (4ms) (skipped)                                                                                                             nitro 08:20:34
  ├─ /es/posts/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (6ms) (skipped)                                                                                                          nitro 08:20:34
  ├─ /en/posts/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (18ms) (skipped)                                                                                                         nitro 08:20:34
  ├─ /posts/_payload.json (3ms)                                                                                                                                                            nitro 08:20:34
  ├─ /es/privacy-policy/_payload.json (4ms)                                                                                                                                                nitro 08:20:34
  ├─ /es/posts/_payload.json (2ms)                                                                                                                                                         nitro 08:20:34
  ├─ /en/posts/_payload.json (11ms)                                                                                                                                                        nitro 08:20:34
  ├─ /posts/nice-to-meet-you (19ms)                                                                                                                                                        nitro 08:20:34
  ├─ /posts/bienvenido (28ms)                                                                                                                                                              nitro 08:20:34
  ├─ /posts/nice-to-meet-you/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (3ms) (skipped)                                                                                            nitro 08:20:34
  ├─ /posts/bienvenido/_payload.json?ceabf6bb-3bda-4f28-b71b-4ded41eb7356 (9ms) (skipped)                                                                                                  nitro 08:20:34
  ├─ /posts/nice-to-meet-you/_payload.json (2ms)                                                                                                                                           nitro 08:20:34
  ├─ /posts/bienvenido/_payload.json (2ms)

As you can see,/en/posts/nice-to-meet-you, /es/posts/bienvenido are correct, but then there is also:

• /posts/nice-to-meet-you
• /posts/bienvenido

and the correct route:

• /posts/schoen-dass-du-hier-bist

I am using the default nitro crawlLinks configuration and also using the i18n config prefix_and_default.

What am I missing? I tried out a couple of things:

• not setting the custom nitro hook results in generating all posts for the default route
• ignoring automatic localization of routes doesn't work

Any idea? I know that this discussion is officially resolve but my issue still persists while I can't use different docker-images.

[Pfenya]

Not sure what is causing your issue but potentially my setup can help here - for german and english I am using one docker container and basically set up a system where i tell it the locales I want to currently get:

const locales = process.env.LOCALES;
const localesArray = locales.split(",");

(this obviously could also be a simple list instead of going via the env - env helped me due to the multiple docker scenario)

and then I have a helper function:

async function  getDynamicPages() {
  var pages = []
  var localeString = "";
  var defaultLocale = localesArray[0]
  if(localesArray.length > 1){
    for (let i = 0; i < localesArray.length; i++) {
      
      localeString = localeString + "&locale["+i+"]="+localesArray[i];
    }
  } else {
    localeString = "&locale="+locales;
  }
  const { data } = await axios.get(strapiBaseUri + "/api/pages?sort[0]=title:asc&pagination[pageSize]=1000&fields[0]=slug&fields[1]=locale&pagination[page]=1&publicationState=live"+localeString);
  
  data.data.map((page) => {
      let basePath = "/";
      //console.log(page);
      if(page.attributes.locale !== defaultLocale){
       basePath = "/"+page.attributes.locale+"/";
       } 
      pages.push(
        basePath+page.attributes.slug
      )
      
    })

  console.log(pages);
  return pages;
}

and then in the NuxtConfig:

 hooks: {
    async 'nitro:config'(nitroConfig) {
      //if (nitroConfig.dev) return
  
      let slugs = await getDynamicPages();
      let ignoreSlugs = await getIgnoredPages();
      console.log(await getIgnoredPages());
      console.log("ignoring: "+ignoreSlugs);
      nitroConfig.prerender.ignore.push(...ignoreSlugs);
      nitroConfig.prerender.routes.push(...slugs);
      return
    }
    
  },
  nitro: {
  prerender: {
      autoSubfolderIndex: false,
      failOnError: false,
      crawlLinks: true,
    },
    output: { dir: '.output/'+folderName, serverDir: '.output/'+folderName+'/server', publicDir: '.output/'+folderName+'/public' }

  },

Adding my i18n settings also since they could potentially also mess with the link generation

i18n: {
    customRoutes: 'config',
    strategy: 'prefix_except_default',
    defaultLocale: localesArray[0],
    detectBrowserLanguage: false,
    dynamicRouteParams: true,
    differentDomains: false,
    locales: getLocales(),    
    parsePages: false,

  }

[WaldemarEnns]

Hey, thanks a lot for your quick response! I for myself found a little bug in my application that was causing that issue for me. In my case, the crawlLinks mode of nuxt's prerender strategy, was hitting a NuxtLink that was not tranlsated/localized. So I always ended up in the situation that the my blog-post pages, that should be prerendered, were applied to the default translation (in my case de, see above logs).

That NuxtLink is detected by the crawlLinks strategy of nitro and apparently my not-translated links were applied to the default route. The fix was quite simple: Use the const localePath = useLocalePath() helper from i18n-nuxt to get the correct redirect-links at build-time so that the prerender crawler would apply the correct locale to the paths et voilà, my prerenderd pages are correct now.

I hope that I could explain my issue & solution in a quite understandable way - if not, please let me know and I will put some more energy into it 😄 (in a hurry right now)