Fix hydration issue on publicView pages (baserow#4843)

Author: dimmur-brw

web-frontend/modules/database/pages/publicView.vue

@@ -19,7 +19,7 @@
 <script setup>
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
-import { useAsyncData, useNuxtApp } from '#app'
+import { useAsyncData, useNuxtApp, useState } from '#app'
 import { useHead } from '#imports'
 
 import Toasts from '@baserow/modules/core/components/toasts/Toasts'
@@ -37,9 +37,12 @@ const route = useRoute()
 const nuxtApp = useNuxtApp()
 const { $store, $realtime, $priorityBus, $config, $i18n } = nuxtApp
 
-const originalLanguageBeforeDetect = ref(null)
-originalLanguageBeforeDetect.value = $i18n.locale
-$i18n.locale = $i18n.getBrowserLocale()
+const originalLanguageBeforeDetect = ref($i18n.locale.value)
+const detectedLocale = useState('public-view-detected-locale', () => {
+  return $i18n.getBrowserLocale() || $i18n.defaultLocale
+})
+$i18n.locale.value = detectedLocale.value
+await $i18n.loadLocaleMessages(detectedLocale.value)
 
 const { data, error } = await useAsyncData(
   `database-public-view-${route.params.slug}`,
@@ -179,7 +182,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  $i18n.locale = originalLanguageBeforeDetect.value
+  $i18n.locale.value = originalLanguageBeforeDetect.value
 
   document.body.removeEventListener('keydown', keydownEvent)
 

web-frontend/modules/database/pages/publicViewLogin.vue

@@ -42,9 +42,9 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useHead } from '#imports'
+import { useHead, useState } from '#imports'
 import { useVuelidate } from '@vuelidate/core'
 import { required, helpers } from '@vuelidate/validators'
 
@@ -60,10 +60,13 @@ const router = useRouter()
 const nuxtApp = useNuxtApp()
 const { $store, $client, $i18n } = nuxtApp
 
-// Language detection (replaces languageDetection mixin)
-const originalLanguageBeforeDetect = ref(null)
-originalLanguageBeforeDetect.value = $i18n.locale
-$i18n.locale = $i18n.getBrowserLocale()
+// Language detection — useState ensures server/client agree on the detected locale (SSR-safe)
+const originalLanguageBeforeDetect = ref($i18n.locale.value)
+const detectedLocale = useState('public-view-login-detected-locale', () => {
+  return $i18n.getBrowserLocale() || $i18n.defaultLocale
+})
+$i18n.locale.value = detectedLocale.value
+await $i18n.loadLocaleMessages(detectedLocale.value)
 
 // Page title
 useHead({
@@ -140,4 +143,8 @@ onMounted(() => {
     passwordInput.value?.focus()
   })
 })
+
+onBeforeUnmount(() => {
+  $i18n.locale.value = originalLanguageBeforeDetect.value
+})
 </script>