fix: prevent duplicate message requests on hydration (#3852)

Author: BobbieGoede

specs/lazy_load/basic_lazy_load.spec.ts

@@ -29,6 +29,11 @@ describe('basic lazy loading', async () => {
     expect(await page.locator('#dynamic-time').innerText()).to.not.equal(dynamicTime)
   })
 
+  test('(#3773) messages are loaded once on page load', async () => {
+    const { requests } = await renderPage('/')
+    expect(requests.filter(x => x.includes('/en/messages.json'))).toHaveLength(1)
+  })
+
   test('locales are fetched on demand', async () => {
     const home = url('/')
     const { page } = await renderPage(home)

src/runtime/context.ts

@@ -75,6 +75,7 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
   const detectConfig = useI18nDetection(nuxt)
   const serverLocaleConfigs = useLocaleConfigs()
   const localeCookie = useI18nCookie(detectConfig)
+  const loadMap = new Set<string>()
 
   /** Get computed config for locale */
   const getLocaleConfig = (locale: string) => serverLocaleConfigs.value![locale]
@@ -159,12 +160,17 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
       return joinURL(baseUrl(), nuxt.$config.app.baseURL)
     },
     loadMessages: async (locale: string) => {
+      // prevent multiple loads during hydration
+      if (nuxt.isHydrating && loadMap.has(locale)) { return }
+
       try {
         return ctx.dynamicResourcesSSG || import.meta.dev
           ? await loadMessagesFromClient(locale)
           : await loadMessagesFromServer(locale)
       } catch (e) {
         console.warn(`Failed to load messages for locale "${locale}"`, e)
+      } finally {
+        loadMap.add(locale)
       }
     },
     composableCtx: undefined!,