Problem with experimental localeDetector and Firebase with SSR enabled

[ilyamisyura]

I found an interesting bug when using experimental localeDetector on Firebase with SSR enabled.
I have tested the same configuration deployed to Netlify, and netlify instance doesn't have this bug and everything works perfectly.

What I want

A 'no_prefix' strategy, locale must be controlled by the cookie, server-side rendering (SSR) enabled.

What I have

Dependencies:

"dependencies": {
    "@firebase/app-types": "^0.9.3",
    "@nuxtjs/i18n": "^9.1.1",
    "firebase": "^10.14.1",
    "nuxt": "^3.14.1592",
    "nuxt-vuefire": "^1.0.4",
    "vue": "latest",
    "vue-router": "latest",
    "vuefire": "^3.2.0"
  }

i18n section from nuxt.config.ts:

i18n: {
    experimental: {
      localeDetector: 'localeDetector.ts'
    },
    locales: [
      { code: 'de', language: 'de-CH', file: 'de.json' },
      { code: 'en', language: 'en-US', file: 'en.json' }
    ],
    defaultLocale: 'de',
    strategy: 'no_prefix',
    langDir: 'locales/',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_locale',
      alwaysRedirect: true,
      redirectOn: 'root',
      fallbackLocale: 'de',
    },
    vueI18n: './i18n.config.ts'
  },

Some say that i18n.config.ts and legacy: false flag could solve the issue, but having it or not doesn't affect the problem. I have it, so it must be declared here:

export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'de',
    fallbackLocale: 'de'
}))

localeDetector.ts follows the suggested approach from the documentation and designed to work with cookies only:

export default defineI18nLocaleDetector((event, config) => {
    const cookie = tryCookieLocale(event, { lang: 'de-CH', name: 'i18n_locale' })
    if (cookie) {
        return cookie.toString()
    }
    return config.defaultLocale
})

Main problem

Every time I reload the page on the instance hosted on Firebase (hosting, functions)

• either a defalut web browser language is detected (if browser supports EN or DE)
• or fallback locale is set (which is DE) if the browser has any other language (UA in my case)

and the response sets the cooke accordingly with Set-Cookie: i18n_locale=default_browser_locale/fallback_locale.

Again, important note: Netlify instance works stable in all cases.

No-SSR case

with ssr: false in nuxt.config.ts everything works correctly, as desired.

Detailed Firebase behavior

A request from the browser that supports English while loading a website looks like this:

:method: GET
:scheme: https
:authority: nuxt-i18n-playground.web.app
:path: /
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9
Cookie: i18n_locale=de
...

Here comes the problem: the response contains "Set-Cookie: i18n_locale=en":

:status: 200
Accept-Ranges: bytes
Alt-Svc: h3=":443";ma=86400,h3-29=":443";ma=86400,h3-27=":443";ma=86400
Cache-Control: private
Content-Length: 2532
Content-Type: text/html;charset=utf-8
Date: Tue, 17 Dec 2024 09:33:20 GMT
Expires: Tue, 17 Dec 2024 09:33:20 GMT
Server: Google Frontend
Set-Cookie: i18n_locale=en; Path=/; Expires=Wed, 17 Dec 2025 09:33:20 GMT; SameSite=Lax
Strict-Transport-Security: max-age=31556926; includeSubDomains; preload
Vary: cookie,need-authorization, x-fh-requested-host, accept-encoding
x-cache: MISS
x-cache-hits: 0
x-cloud-trace-context: 84631f11937f4b0363ea4e166727d815
x-country-code: TH
x-orig-accept-language: en-GB,en;q=0.9
x-powered-by: Nuxt
x-served-by: cache-bkk2310026-BKK
x-timer: S1734428000.201266,VS0,VE666

Netlify behavior

While the request looks the same and contains Cookie: i18n_locale=de, the response doesn't have Set-Cookie: i18n_locale=default_browser_locale/fallback_locale

:status: 200
Age: 2
Cache-Control: no-cache
cache-status: "Netlify Durable"; fwd=miss, "Netlify Edge"; fwd=miss
Content-Encoding: br
Content-Type: text/html;charset=utf-8
Date: Tue, 17 Dec 2024 09:36:43 GMT
netlify-vary: query
Server: Netlify
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
x-nf-request-id: 01JF9ZM4BQZ6CT9NSX96PKXE5F
x-powered-by: Nuxt

Question to the community

Have you ever faced such an issue? Most probably the problem is on Firebase side, but still it's hard for me to understand what's in the core.

Would love to hear from anyone!

[BobbieGoede]

The localeDetector is (only) used to detect the locale or server/nitro routes, it seems like you're describing behavior for normal pages/routes do I understand this correctly?

[ilyamisyura]

@BobbieGoede thanks for dropping by! Sorry for leaving this blind spot.

Additional info

I use nitro, and I use different presets for build for 'netlify' and 'firebase' accordingly. During routing and using links like this

<NuxtLink :to="useLocalePath()('/')">Home</NuxtLink>

locale is not switched. Overriding of locale cookie happens only when reloading the page.

Full nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  i18n: {
    experimental: {
      localeDetector: 'localeDetector.ts'
    },
    locales: [
      { code: 'de', language: 'de-CH', file: 'de.json' },
      { code: 'en', language: 'en-US', file: 'en.json' }
    ],
    defaultLocale: 'de',
    strategy: 'no_prefix',
    langDir: 'locales/',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_locale',
      alwaysRedirect: true,
      redirectOn: 'root',
      fallbackLocale: 'de',
    },
    vueI18n: './i18n.config.ts'
  },
  modules: ['@nuxtjs/i18n', 'nuxt-vuefire'],
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west6',
        maxInstances: 3,
      },
      nodeVersion: "20",
    },
    preset: 'firebase',
  },
  ssr: true,
  vuefire: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID
    },
    services: {
      firestore: true,
      functions: true
    }
  },
})

Live demo

Here you can see live demo where I've implemented routing for better showcasing the problem:

• Firebase (broken): https://nuxt-i18n-playground.web.app
• Netlify (dope stable performance): https://nuxt-i18n-playground.netlify.app/second

Also, here's a public repo, just in case:
https://gitlab.com/ilyamisyura/nuxt-i18n-playground

Hope this clarifies the situation.