Nuxt•4d ago

DayJs hydration error (setting locale after API call) on SSR

Hi, So we've got a website which is rendered in different languages. Which language it will be it just knows after a first API call. It's about events / conferences which are held in either english or an other language and the whole eventsite is then formatted in that language - so no interactive user switch or url-prefixes. However - I can't get it run on Nuxt3 (we're currently transfering the site from Nuxt 2)

<script setup>
...

frontend.value = await fetchFrontend(route.params.slug);

nuxtApp.$i18n.setLocale(frontend.value.language.short);
nuxtApp.$dayjs.locale(frontend.value.language.short);

<script setup>
...

frontend.value = await fetchFrontend(route.params.slug);

nuxtApp.$i18n.setLocale(frontend.value.language.short);
nuxtApp.$dayjs.locale(frontend.value.language.short);

While i18n doesn't make any problems, dayJs does.

 
  - rendered on server: 07/02/2025
  - expected on client: 02.07.2025

 
  - rendered on server: 07/02/2025
  - expected on client: 02.07.2025

(expected on client is right) And I'm running out of ideas how to fix this.

3 Replies

kapa.ai•4d ago

Hi @bibamann. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The hydration error you’re experiencing with Day.js in Nuxt 3 is a classic SSR/client mismatch: the server renders the date in one locale (e.g., "07/02/2025"), but after your API call on the client, you set the correct locale and the date format changes (e.g., "02.07.2025"). This causes a hydration mismatch because the initial HTML from the server doesn’t match what the client expects. Why this happens:
- On the server, you don’t know the correct locale until after the API call, but SSR has already rendered the page. - On the client, you set the locale after fetching, so the date is formatted differently. How to fix:
To avoid hydration mismatches in Nuxt 3, you should ensure that the data and locale used for rendering are the same on both server and client. Here are recommended approaches based on Nuxt best practices: 1. Use SSR-friendly State and Hydration You need to fetch the locale and set it before rendering both on the server and client. Nuxt’s SSR-friendly state management (e.g., useState) or hydration utilities can help synchronize this state. Example using SSR-friendly state:

<script setup>
const route = useRoute()
const frontend = useState('frontend', () => null)
const locale = useState('locale', () => 'en') // default

if (!frontend.value) {
  frontend.value = await fetchFrontend(route.params.slug)
  locale.value = frontend.value.language.short
  // Set Day.js locale here if needed
}
</script>

<script setup>
const route = useRoute()
const frontend = useState('frontend', () => null)
const locale = useState('locale', () => 'en') // default

if (!frontend.value) {
  frontend.value = await fetchFrontend(route.params.slug)
  locale.value = frontend.value.language.short
  // Set Day.js locale here if needed
}
</script>

This ensures both server and client use the same locale for rendering, preventing mismatches. You can then use the locale state to format your dates. 2. Use <NuxtTime> for Dates Nuxt 3.17+ provides the <NuxtTime> component, which is designed to handle locale-aware date formatting with SSR/client consistency, avoiding hydration errors. It uses the correct locale automatically or lets you specify one:

<template>
  <NuxtTime :datetime="eventDate" :locale="locale" />
</template>

<template>
  <NuxtTime :datetime="eventDate" :locale="locale" />
</template>

This component ensures the date is rendered the same way on both server and client, even if the locale is determined dynamically after an API call, as long as you set the locale in SSR state before rendering the page.
NuxtTime component docs 3. Avoid Client-only Locale Switching for SSR Content If you must fetch the locale after the first API call, ensure this happens during SSR, not just on the client. Otherwise, wrap the date output in a <ClientOnly> block to avoid hydration errors, but this will not be SEO-friendly and will delay rendering. Summary - Fetch the locale and set it in SSR state before rendering. - Use SSR-friendly state (useState) to share the locale between server and client. - Use <NuxtTime> for date formatting to ensure SSR/client consistency. - Avoid setting the locale only on the client after hydration for SSR-rendered content. For more on hydration best practices and SSR-friendly state, see the Nuxt docs:
Hydration best practices
SSR-friendly state management
NuxtTime component ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@401146988999081984> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

the_aceix•4d ago

not sure but maybe run this in the beforeMount hook? if you dont need it on the server side

Gaming

Programming

DayJs hydration error (setting locale after API call) on SSR

Did you find this page helpful?