fix: missing i18n context during prerender (#3862)

Author: BobbieGoede

src/runtime/server/context.ts

@@ -1,7 +1,9 @@
 import type { LocaleMessages } from '@intlify/core'
 import type { DefineLocaleMessage } from '@intlify/h3'
-import type { H3Event, H3EventContext } from 'h3'
-import type { ResolvedI18nOptions } from '../shared/vue-i18n'
+import { type H3Event, type H3EventContext, getRequestURL } from 'h3'
+import { type ResolvedI18nOptions, setupVueI18nOptions } from '../shared/vue-i18n'
+import { useRuntimeI18n } from '../shared/utils'
+import { createLocaleConfigs, getDefaultLocaleForDomain } from '../shared/locales'
 
 export function useI18nContext(event: H3Event) {
   if (event.context.nuxtI18n == null) {
@@ -14,18 +16,35 @@ export function tryUseI18nContext(event: H3Event) {
   return event.context.nuxtI18n
 }
 
-const headers = new Headers({ 'x-nuxt-i18n': 'internal' })
-if (import.meta.dev) {
-  headers.set('Cache-Control', 'no-cache')
+const getHost = (event: H3Event) => getRequestURL(event, { xForwardedHost: true }).host
+
+export async function initializeI18nContext(event: H3Event) {
+  const runtimeI18n = useRuntimeI18n(undefined, event)
+  const defaultLocale: string = runtimeI18n.defaultLocale || ''
+  const options = await setupVueI18nOptions(getDefaultLocaleForDomain(getHost(event)) || defaultLocale)
+  const localeConfigs = createLocaleConfigs(options.fallbackLocale)
+  const ctx = createI18nContext()
+
+  ctx.vueI18nOptions = options
+  ctx.localeConfigs = localeConfigs
+
+  event.context.nuxtI18n = ctx
+  return ctx
 }
+
 /**
  * Fetches the messages for the specified locale.
  * @internal
  */
-export const fetchMessages = async (locale: string) =>
-  await $fetch<LocaleMessages<DefineLocaleMessage>>(`${__I18N_SERVER_ROUTE__}/${locale}/messages.json`, {
+export const fetchMessages = async (locale: string) => {
+  const headers = new Headers({ 'x-nuxt-i18n': 'internal' })
+  if (import.meta.dev) {
+    headers.set('Cache-Control', 'no-cache')
+  }
+  return await $fetch<LocaleMessages<DefineLocaleMessage>>(`${__I18N_SERVER_ROUTE__}/${locale}/messages.json`, {
     headers,
   })
+}
 
 export function createI18nContext(): NonNullable<H3EventContext['nuxtI18n']> {
   return {

src/runtime/server/plugin.ts

@@ -1,10 +1,10 @@
 import { stringify } from 'devalue'
 import { defineI18nMiddleware } from '@intlify/h3'
 import { defineNitroPlugin, useStorage } from 'nitropack/runtime'
-import { createI18nContext, tryUseI18nContext, useI18nContext } from './context'
+import { initializeI18nContext, tryUseI18nContext, useI18nContext } from './context'
 import { createUserLocaleDetector } from './utils/locale-detector'
 import { pickNested } from './utils/messages-utils'
-import { createLocaleConfigs, getDefaultLocaleForDomain, isSupportedLocale } from '../shared/locales'
+import { isSupportedLocale } from '../shared/locales'
 import { setupVueI18nOptions } from '../shared/vue-i18n'
 import { joinURL } from 'ufo'
 // @ts-expect-error virtual file
@@ -19,8 +19,6 @@ import { useDetectors } from '../shared/detection'
 import { domainFromLocale } from '../shared/domain'
 import { isExistingNuxtRoute, matchLocalized } from '../shared/matching'
 
-const getHost = (event: H3Event) => getRequestURL(event, { xForwardedHost: true }).host
-
 function* detect(
   detectors: ReturnType<typeof useDetectors>,
   detection: ReturnType<typeof useI18nDetection>,
@@ -145,26 +143,14 @@ export default defineNitroPlugin(async (nitro) => {
 
   const baseUrlGetter = createBaseUrlGetter()
 
-  async function initialize(event: H3Event) {
-    const options = await setupVueI18nOptions(getDefaultLocaleForDomain(getHost(event)) || _defaultLocale)
-    const localeConfigs = createLocaleConfigs(options.fallbackLocale)
-    const ctx = createI18nContext()
-
-    ctx.vueI18nOptions = options
-    ctx.localeConfigs = localeConfigs
-
-    event.context.nuxtI18n = ctx
-    return ctx
-  }
-
   nitro.hooks.hook('request', async (event: H3Event) => {
-    await initialize(event)
+    await initializeI18nContext(event)
   })
 
   nitro.hooks.hook('render:before', async ({ event }) => {
     if (!__I18N_SERVER_REDIRECT__) { return }
 
-    const ctx = import.meta.prerender && !event.context.nuxtI18n ? await initialize(event) : useI18nContext(event)
+    const ctx = import.meta.prerender && !event.context.nuxtI18n ? await initializeI18nContext(event) : useI18nContext(event)
     const url = getRequestURL(event)
     const detector = useDetectors(event, detection)
     const localeSegment = detector.route(event.path)

src/runtime/server/routes/messages.ts

@@ -1,7 +1,7 @@
 import { deepCopy } from '@intlify/shared'
 import { defineCachedEventHandler, defineCachedFunction } from 'nitropack/runtime'
 import { createError, defineEventHandler, getRouterParam } from 'h3'
-import { useI18nContext } from '../context'
+import { initializeI18nContext, tryUseI18nContext, useI18nContext } from '../context'
 import { getMergedMessages } from '../utils/messages'
 
 import type { H3Event } from 'h3'
@@ -31,10 +31,12 @@ const _cachedMessageLoader = defineCachedFunction(_messagesHandler, {
   name: 'i18n:messages-internal',
   maxAge: !__I18N_CACHE__ ? -1 : 60 * 60 * 24,
   getKey: event => [getRouterParam(event, 'locale') ?? 'null', getRouterParam(event, 'hash') ?? 'null'].join('-'),
-  shouldBypassCache(event) {
+  async shouldBypassCache(event) {
     const locale = getRouterParam(event, 'locale')
     if (locale == null) { return false }
-    return !useI18nContext(event).localeConfigs?.[locale]?.cacheable
+    // prerendering may require initializing context
+    const ctx = tryUseI18nContext(event) || await initializeI18nContext(event)
+    return !ctx.localeConfigs?.[locale]?.cacheable
   },
 })
 

src/runtime/shared/utils.ts

@@ -1,10 +1,12 @@
-import { type NuxtApp, useRuntimeConfig } from '#app'
+import type { NuxtApp } from '#app'
+import { useRuntimeConfig } from '#imports'
 import { isString } from '@intlify/shared'
 import type { DetectBrowserLanguageOptions, I18nPublicRuntimeConfig, RootRedirectOptions } from '#internal-i18n-types'
+import type { H3Event } from 'h3'
 
-export function useRuntimeI18n(nuxtApp?: NuxtApp) {
+export function useRuntimeI18n(nuxtApp?: NuxtApp, event?: H3Event) {
   if (!nuxtApp) {
-    return useRuntimeConfig().public.i18n as unknown as I18nPublicRuntimeConfig
+    return useRuntimeConfig(event).public.i18n as unknown as I18nPublicRuntimeConfig
   }
   return nuxtApp.$config.public.i18n as unknown as I18nPublicRuntimeConfig
 }