fascinating-indigo

Nuxt SSR hydration mismatch

Hello all, Nuxt v4, tanstack query v5 I'm trying tanstack with nuxt, looks like SSR works well but I have an hydration mismtach I followed this : https://tanstack.com/query/latest/docs/framework/vue/guides/ssr My code :

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const ky = useKy('internal')

const result = useQuery({
    queryKey: ['introduction'],
    queryFn: async () => {
        return ky.get('rules/fr/introduction.md').text()
    }
})

onServerPrefetch(async () => {
    await result.suspense()
})

</script>

<template>
    <div>
        {{ result.data }}
    </div>
</template>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const ky = useKy('internal')

const result = useQuery({
    queryKey: ['introduction'],
    queryFn: async () => {
        return ky.get('rules/fr/introduction.md').text()
    }
})

onServerPrefetch(async () => {
    await result.suspense()
})

</script>

<template>
    <div>
        {{ result.data }}
    </div>
</template>

The mismatch :

7 Replies

fascinating-indigoOP•2w ago

Did I do anything wrong ^^" ? Thanks 🙂 if I remove the onServerPrefetch it works properly most of the time... still have it some time randomly but with comments inside not sure what is the intended way ^^"

wise-white•7d ago

You might want to check all items from this list, which is a list of common issues with hydration - https://nuxt.com/docs/3.x/guide/best-practices/hydration

Nuxt

Nuxt and hydration · Best Practices v3

Why fixing hydration issues is important

fascinating-indigoOP•7d ago

normally it's not a common issue, since it works with useFetch() without hydration issue (still checked to be sure ^^) I can't reproduce it now... I'm wondering if it was just from HMR wizardries at that moment If this is the right way to call it (without onServerPrefetch or dealing with suspense) I'm probably good to go I guess ^^

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const ky = useKy('internal')

const result = useQuery({
    queryKey: ['introduction'],
    queryFn: async () => {
        return ky.get('rules/fr/introduction.md').text()
    }
})

</script>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const ky = useKy('internal')

const result = useQuery({
    queryKey: ['introduction'],
    queryFn: async () => {
        return ky.get('rules/fr/introduction.md').text()
    }
})

</script>

wise-white•7d ago

Without suspense it might not work, as you are not waiting for data to be fetched so it might be missing from initial page render, and actually fetch on the client (you might want to inspect the initial html sent to client to confirm). You can use await suspense() in onServerPrefetch -> it will suspend while waiting for data only on server. Or directly in setup function -> it will suspend both on server and client if necessary. Make sure that you do not have some kind of timestamp that might change between rendering on server and client, you wrapped this component in <Suspense> and have correct staleTime set to avoid refetching on client.

fascinating-indigoOP•7d ago

Thanks a lot I'll check all that 🙂 if i'm in <script setup lang="ts"> in vue 3 it's considered as being in the setup() func right ? I started at vue 3 and nuxt 3 so I'm not used to setup() func in the option API ^^"

wise-white•7d ago

If you run this example - https://github.com/TanStack/query/tree/main/examples/vue/nuxt3 you will see in devtools, that api call is not happening for the initial render and data is already included in initial html - means suspense and SSR is working. Yes <script setup> is valid

fascinating-indigoOP•7d ago

Perfect thanks 🙂 as you said, I set up it right and the api call is indeed not happening and the data il already included. works like a charm, I'm loving tanstack query a lot thanks for your help

Gaming

Programming

Nuxt SSR hydration mismatch

Did you find this page helpful?