how to preserve programmatically added translations on the client?

I am using localization translations from the legacy application backend (under the hood, it converts Java .properties files into JSON format understood by VueI18n).

The logic works as follows:

  async fetch ({ $axios, store, route, app }: Context) {
    const [page, lang] = route.name?.split('___') ?? []
    const res = await $axios.get(`http://localhost:8080/apiroot/${lang}/${page}:renderData`)
    const renderData = res.data as TapestryRenderData
    for (const componentKey in renderData.components) {
      store.commit(`${componentKey}/setup`, renderData.components[componentKey])
    }
    app.i18n.setLocaleMessage('en', renderData.messages)
    app.i18n.setLocale('en')
  },

I observe the following effect:

• everything loads correctly and localizations are present during the first fraction of second when the pre-rendered page is displayed
• then, client-side hydration happens and all localizations are lost

Is there is a way to either (a) avoid updating localizations during the client-side hydration or (b) somehow pass localizations from the SSR phase to client-side hydration phase (so I could programmatically set messages again in beforeMount hook, for example)?

[xfyre]

@rchl I have eventually managed to fix this. If you’re curious, here’s how:

• (a) in the method called from asyncData (where I actually retrieve server-side localizations): call app.i18n.mergeLocaleMessage(lang, renderData.messages) before updating the store
• (b) in the created component hook (in fact I use a mixin for this): retrieve current page messages from the Vuex store (they were saved there during asyncData call), call this.$i18n.mergeLocaleMessage(storedLocale, this.$store.getters['t5/i18n/getMessages'])

Item (a) fixes flickering and warnings during the SPA navigation. Item (b) fixes warnings when it’s going through SSR.

Downside: since I’m using mergeLocaleMessage, it’ll end up with all my server-side localizations in the browser memory (I’m not sure it’s a bad thing, but there’s certainly some room for optimizations).

Thanks a lot for your help!

[sugoidesune]

What I do now is:

async asyncData(context){
   // fetch translation for your source
   var translation = await fetch('/translation')

   // get locale of current page
   var locale = context.app.i18n.locale
   // set translation for Server Side Rendering
   context.app.i18n.mergeLocaleMessage(locale, translation)
   // save it for use on client side
   return {translation: translation}
},
created(){
   // prevent reverting back to not found after hard-loading page.
   this.$i18n.mergeLocaleMessage(this.$i18n.locale, this.translation)
}

It is unfortunate that the step at created is necessary. I haven’t experienced any flickers with this solution method.

SEO: nuxt async i18n