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>

<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 :

Nuxt SSR hydration mismatch

Similar Threads

Similar Threads

Similar Threads