fix: include hash in locale message server route (#3808)

Author: BobbieGoede

package.json

@@ -100,6 +100,7 @@
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
     "nuxt-define": "^1.0.0",
+    "ohash": "^2.0.11",
     "oxc-parser": "^0.81.0",
     "oxc-transform": "^0.81.0",
     "oxc-walker": "^0.4.0",

pnpm-lock.yaml

@@ -259,9 +259,9 @@ export async function startServerWithRuntimeConfig(env: Record<string, unknown>,
  */
 export function waitForLocaleNetwork(page: Page, locale: string, type: 'request' | 'response') {
   if (type === 'request') {
-    return page.waitForRequest(new RegExp(`/_i18n/${locale}/messages.json`))
+    return page.waitForRequest(new RegExp(`/_i18n/.*/${locale}/messages.json`))
   }
-  return page.waitForResponse(new RegExp(`/_i18n/${locale}/messages.json`))
+  return page.waitForResponse(new RegExp(`/_i18n/.*/${locale}/messages.json`))
 }
 
 /**

specs/helper.ts

@@ -65,7 +65,11 @@ export async function extendBundler(ctx: I18nNuxtContext, nuxt: Nuxt) {
   await addDefinePlugin(defineConfig)
 }
 
-export function getDefineConfig({ options, fullStatic }: I18nNuxtContext, server = false, nuxt = useNuxt()) {
+export function getDefineConfig(
+  { options, fullStatic, deploymentHash }: I18nNuxtContext,
+  server = false,
+  nuxt = useNuxt()
+) {
   const cacheLifetime = options.experimental.cacheLifetime ?? (fullStatic ? FULL_STATIC_LIFETIME : -1)
   const isCacheEnabled = cacheLifetime >= 0 && (!nuxt.options.dev || !!options.experimental.devCache)
 
@@ -99,7 +103,8 @@ export function getDefineConfig({ options, fullStatic }: I18nNuxtContext, server
     // eslint-disable-next-line @typescript-eslint/no-base-to-string
     __I18N_ROUTING__: JSON.stringify(nuxt.options.pages.toString() && options.strategy !== 'no_prefix'),
     __I18N_STRICT_SEO__: JSON.stringify(!!options.experimental.strictSeo),
-    __I18N_SERVER_REDIRECT__: JSON.stringify(!!options.experimental.nitroContextDetection)
+    __I18N_SERVER_REDIRECT__: JSON.stringify(!!options.experimental.nitroContextDetection),
+    __I18N_HASH__: JSON.stringify(deploymentHash)
   }
 
   if (nuxt.options.ssr || !server) {

src/bundler.ts

@@ -1,6 +1,7 @@
 import { createResolver } from '@nuxt/kit'
 import { fileURLToPath } from 'node:url'
 import { dirname } from 'pathe'
+import { hash } from 'ohash'
 import type { Resolver } from '@nuxt/kit'
 import type { FileMeta, LocaleInfo, LocaleObject, NuxtI18nOptions } from './types'
 
@@ -15,6 +16,7 @@ export interface I18nNuxtContext {
   distDir: string
   runtimeDir: string
   fullStatic: boolean
+  deploymentHash: string
 }
 
 const resolver = createResolver(import.meta.url)
@@ -34,6 +36,7 @@ export function createContext(userOptions: NuxtI18nOptions): I18nNuxtContext {
     localeCodes: undefined!,
     normalizedLocales: undefined!,
     vueI18nConfigPaths: undefined!,
-    fullStatic: undefined!
+    fullStatic: undefined!,
+    deploymentHash: hash(Date.now()).slice(0, 8)
   }
 }

src/context.ts

@@ -29,3 +29,5 @@ declare let __I18N_PRELOAD__: boolean
 declare let __I18N_ROUTING__: boolean
 declare let __I18N_STRICT_SEO__: boolean
 declare let __I18N_SERVER_REDIRECT__: boolean
+/** Hashed deployment timestamp */
+declare let __I18N_HASH__: string

src/env.d.ts

@@ -105,7 +105,7 @@ export { localeDetector }`
   addServerPlugin(ctx.resolver.resolve('runtime/server/plugin'))
 
   addServerHandler({
-    route: `/_i18n/:locale/messages.json`,
+    route: `/_i18n/:hash/:locale/messages.json`,
     handler: ctx.resolver.resolve('./runtime/server/routes/messages')
   })
 }

src/nitro.ts

@@ -98,7 +98,7 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
   const loadMessagesFromServer = async (locale: string) => {
     if (locale in localeLoaders === false) return
     const headers: HeadersInit = getLocaleConfig(locale)?.cacheable ? {} : { 'Cache-Control': 'no-cache' }
-    const messages = await $fetch(`/_i18n/${locale}/messages.json`, { headers })
+    const messages = await $fetch(`/_i18n/${__I18N_HASH__}/${locale}/messages.json`, { headers })
     for (const k of Object.keys(messages)) {
       i18n.mergeLocaleMessage(k, messages[k])
     }

src/runtime/context.ts

@@ -44,7 +44,7 @@ export default defineNuxtPlugin({
       setupMultiDomainLocales(optionsI18n.defaultLocale)
     }
 
-    prerenderRoutes(localeCodes.map(locale => `/_i18n/${locale}/messages.json`))
+    prerenderRoutes(localeCodes.map(locale => `/_i18n/${__I18N_HASH__}/${locale}/messages.json`))
 
     // create i18n instance
     const i18n = createI18n(optionsI18n)

src/runtime/plugins/i18n.ts

@@ -20,7 +20,7 @@ export default defineNuxtPlugin({
     if (import.meta.server) {
       for (const locale of localeCodes) {
         try {
-          const messages = await $fetch(`/_i18n/${locale}/messages.json`)
+          const messages = await $fetch(`/_i18n/${__I18N_HASH__}/${locale}/messages.json`)
           for (const locale of Object.keys(messages)) {
             nuxt.$i18n.mergeLocaleMessage(locale, messages[locale])
           }