refreshNuxtData does not update server-side data – stale SSR content after page reload #32813

sergeyd108 · 2025-07-29T20:45:03Z

sergeyd108
Jul 29, 2025

I'm using useLazyFetch with a shared composable to load data on both server and client. After a mutation (e.g. POST), I call refreshNuxtData(key) to update the data, and everything works correctly on the client.

However, when I reload the page (F5), the server still sends old data — even though refreshNuxtData was called before. This results in a short flash of outdated content and hydration warnings.

Nuxt version: 4.0.1
useLazyFetch is used with a static key
The composable is called inside <script setup>

What I expect:

Calling refreshNuxtData(key) should invalidate server cache too, so that after reload SSR uses fresh data.

What I observe:

Server returns previously cached data, even though I refreshed it on the client before reload.

Question:

Is this expected behavior?
Should refreshNuxtData also invalidate SSR cache?
What is the recommended way to ensure that updated data is also used for SSR after page reload?

Thanks in advance!

P.S. the code:

import type { FetchError } from 'ofetch'
import type { AsyncDataRequestStatus } from '#app'
import type { ConceptDto, CreateConceptDto, ExtendedConceptDto, UpdateConceptDto } from '#shared/schemas/types/concept'

const key = 'concepts'

export const useConcepts = createSharedComposable(() => {
  const { data: entities } = useNuxtData<ExtendedConceptDto[]>(key)
  const status = ref<AsyncDataRequestStatus>('idle')
  const pending = ref(false)
  const error = ref<FetchError>()

  const actions = {
    async load() {
      const result = await useLazyFetch('/api/concepts', { key, default: () => [] })
      syncRefs(result.status, status)
      syncRefs(result.pending, pending)
      syncRefs(result.error, error)
      return result
    },
    async create(data: CreateConceptDto) {
      const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
      await refreshNuxtData(key)
      return entity
    },
    async update(id: string, data: UpdateConceptDto) {
      const entity = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
      await refreshNuxtData(key)
      return entity
    },
    async delete(id: string) {
      await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'DELETE' })
      await refreshNuxtData(key)
    },
  }

  return reactive({ ...actions, entities, status, pending, error })
})

// app.vue
const concepts = useConcepts()
await concepts.load()

Answered by sergeyd108

Jul 31, 2025

Another thing I did was replace the shared composable with a Pinia store — that seems to have done the trick.

View full answer

VivensB · 2025-07-29T21:22:11Z

VivensB
Jul 29, 2025

refreshNuxtData(key) only invalidates the client-side cache, not the server-side cached response used in SSR.
So, yes, this is expected behavior, and no, it does not refresh server cache.

option 1:
const { data: entities } = await useFetch('/api/concepts', {
key,
server: true,
lazy: false, // make sure lazy is OFF
default: () => [],
})

Option 2: Invalidate SSR cache using a manual version or timestamp

const cacheBuster = useState('concepts-version', () => Date.now())

const { data: entities } = await useLazyFetch('/api/concepts', {
key: () => concepts-${cacheBuster.value}, // dynamic key to invalidate cache
default: () => [],
})

const refreshConcepts = () => {
cacheBuster.value = Date.now()
}

Then after mutation, do this:

await $fetch('/api/concepts', { method: 'POST', body: data })
refreshConcepts() // invalidates both client + server cache

5 replies

sergeyd108 Jul 30, 2025
Author

Nothing worked — I'm still getting stale or empty data (due to key changes). I don't understand how anyone manages to work with useFetch or useLazyFetch; in my opinion, they're unusable because of this strange behavior. It's baffling that refreshNuxtData doesn't actually refresh the cached data — I can't imagine a scenario where that would be useful. At this point, it seems like the only reliable option is to disable SSR entirely and just use $fetch if I want truly lazy behavior.

VivensB Jul 30, 2025

Okay @sergeyd108, in my opinion, you could try this — it might help:

Stop using useFetch/useLazyFetch for SSR
Use $fetch directly and manage your state manually.

Try to fix useConcepts (Using $fetch + useState)

import type { ConceptDto, CreateConceptDto, ExtendedConceptDto, UpdateConceptDto } from '#shared/schemas/types/concept'

export const useConcepts = createSharedComposable(() => {
  // Reactive global state
  const entities = useState<ExtendedConceptDto[]>('concepts', () => [])
  const pending = ref(false)
  const error = ref<any>(null)

  async function load() {
    try {
      pending.value = true
      error.value = null
      entities.value = await $fetch('/api/concepts')
    } catch (err) {
      error.value = err
    } finally {
      pending.value = false
    }
  }

  async function create(data: CreateConceptDto) {
    const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
    await load() // refresh state after mutation
    return entity
  }

  async function update(id: string, data: UpdateConceptDto) {
    const updated = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
    await load()
    return updated
  }

  async function remove(id: string) {
    await $fetch(`/api/concepts/${id}`, { method: 'DELETE' })
    await load()
  }

  return {
    entities,
    pending,
    error,
    load,
    create,
    update,
    delete: remove,
  }
})```

In Your Page Component - SSR Safe:

<script setup>
const concepts = useConcepts()

// Fetch on server & client
await concepts.load()
</script>

sergeyd108 Jul 30, 2025
Author

Yes, it works, but GET /api/concepts is called twice — once during SSR and once during CSR. I tried to prevent this by using await callOnce(() => concepts.load.execute()), but that resulted in a hydration mismatch. The SSR output renders correctly (I can see in the network tab that the page is fully rendered), but for some reason, the data appears to be missing on the client side.

Updated code:

import type { ConceptDto, CreateConceptDto, ExtendedConceptDto, UpdateConceptDto } from '#shared/schemas/types/concept'

export const useConcepts = createSharedComposable(() => {
  const entities = useState<ExtendedConceptDto[]>('concepts', () => [])

  const actions = {
    load: usePromiseState(async () => {
      entities.value = await $fetch<ExtendedConceptDto[]>('/api/concepts')
    }),
    async create(data: CreateConceptDto) {
      const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
      void actions.load.execute()
      return entity
    },
    async update(id: string, data: UpdateConceptDto) {
      const entity = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
      void actions.load.execute()
      return entity
    },
    async delete(id: string) {
      await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'DELETE' })
      void actions.load.execute()
    },
  }

  return reactive({ ...actions, entities })
})

usePromiseState is just a wrapper that adds promise state and 'execute' to run promise/function.

sergeyd108 Jul 30, 2025
Author

I'm really tired and frustrated by the strange behavior of useLazyFetch. Instead of focusing on actual development, I’m wasting time fighting with things that should just work — but don’t. It’s unfortunate, but I think I’ll have to avoid SSR-related “magic” in my app altogether. Thank you for trying to help, but it seems like this issue just isn't resolvable.

VivensB Jul 30, 2025

You're too close !

Try the bellow solutions to fix hydration mismatch !

Avoid reinventing SSR fetch handling — use Nuxt-native useAsyncData.
Don’t mutate useState() manually unless absolutely needed.
Prefer refresh() over load.execute() if using Nuxt's fetch utilities.

You can rewrite the useConcepts composable like this:

  const { data: entities, refresh } = useAsyncData<ExtendedConceptDto[]>(
    'concepts',
    () => $fetch('/api/concepts'),
    { server: true, default: () => [] }
  )

  const actions = {
    async create(data: CreateConceptDto) {
      const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
      await refresh()
      return entity
    },
    async update(id: string, data: UpdateConceptDto) {
      const entity = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
      await refresh()
      return entity
    },
    async delete(id: string) {
      await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'DELETE' })
      await refresh()
    },
  }

  return reactive({ ...actions, entities })
})```

Option 2:

Use `useAsyncData` with a key — this shares between SSR and CSR

```export const useConcepts = createSharedComposable(() => {
  const { data: entities, refresh } = useAsyncData<ExtendedConceptDto[]>(
    'concepts',
    () => $fetch('/api/concepts'),
    {
      // optional but useful
      server: true,
      lazy: false,
      default: () => [],
      watch: false
    }
  )

  const actions = {
    load: refresh,
    async create(data: CreateConceptDto) {
      const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
      void refresh()
      return entity
    },
    async update(id: string, data: UpdateConceptDto) {
      const entity = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
      void refresh()
      return entity
    },
    async delete(id: string) {
      await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'DELETE' })
      void refresh()
    },
  }

  return reactive({ ...actions, entities })
})

Your pages or components:

const concepts = useConcepts()
console.log(concepts.entities.value) //  SSR + CSR in sync

sergeyd108 · 2025-07-31T12:56:51Z

sergeyd108
Jul 31, 2025
Author

I’m not sure how I fixed it, but I no longer get hydration warnings, and the data is consistently in sync now.

The updated code is mostly the same — the only thing I did was delete node_modules and reinstall everything from scratch.

import type { FetchError } from 'ofetch'
import type { AsyncDataRequestStatus } from '#app'
import type { ConceptDto, CreateConceptDto, ExtendedConceptDto, UpdateConceptDto } from '#shared/schemas/types/concept'

const key = 'concepts'

export const useConcepts = defineStore(key, () => {
  const { data } = useNuxtData<ExtendedConceptDto[]>(key)
  const entities = computed(() => data.value ?? [])
  const status = ref<AsyncDataRequestStatus>('idle')
  const pending = ref(false)
  const error = shallowRef<FetchError>()

  const actions = {
    async init() {
      const result = useLazyFetch('/api/concepts', { key, default: () => [] })
      syncRefs(result.status, status)
      syncRefs(result.pending, pending)
      syncRefs(result.error, error)
      return result
    },
    async refresh() {
      await refreshNuxtData(key)
    },
    clear() {
      clearNuxtData(key)
    },
    async create(data: CreateConceptDto) {
      const entity = await $fetch('/api/concepts', { method: 'POST', body: data })
      void actions.refresh()
      return entity
    },
    async update(id: string, data: UpdateConceptDto) {
      const entity = await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'PUT', body: data })
      void actions.refresh()
      return entity
    },
    async delete(id: string) {
      await $fetch<ConceptDto>(`/api/concepts/${id}`, { method: 'DELETE' })
      void actions.refresh()
    },
  }

  return { ...actions, entities, status, pending, error }
})

2 replies

sergeyd108 Jul 31, 2025
Author

Another thing I did was replace the shared composable with a Pinia store — that seems to have done the trick.

Answer selected by sergeyd108

sergeyd108 Jul 31, 2025
Author

But I also experimented with the shared composable and got it working as well. The key was that useNuxtData was out of sync for some reason, so I used syncRefs to sync a local ref with the ref returned from useLazyFetch.

import type { ConceptListItemDto } from '#shared/schemas/types/concept'

export const useConcepts = createSharedComposable(() => {
  const entities = shallowRef<ConceptListItemDto[]>([])

  async function init() {
    const result = useLazyFetch('/api/concepts', { key: 'concepts', default: () => [] })
    syncRefs(result.data, entities)
    return result
  }

  async function refresh() {
    await refreshNuxtData('concepts')
  }

  return { entities, init, refresh }
})

Uh oh!

refreshNuxtData does not update server-side data – stale SSR content after page reload #32813

Uh oh!

sergeyd108 Jul 29, 2025

What I expect:

What I observe:

Question:

Replies: 2 comments · 7 replies

Uh oh!

VivensB Jul 29, 2025

Uh oh!

sergeyd108 Jul 30, 2025 Author

Uh oh!

Uh oh!

VivensB Jul 30, 2025

Uh oh!

sergeyd108 Jul 30, 2025 Author

Uh oh!

sergeyd108 Jul 30, 2025 Author

Uh oh!

Uh oh!

VivensB Jul 30, 2025

Uh oh!

sergeyd108 Jul 31, 2025 Author

Uh oh!

sergeyd108 Jul 31, 2025 Author

Uh oh!

sergeyd108 Jul 31, 2025 Author

sergeyd108
Jul 29, 2025

Replies: 2 comments 7 replies

VivensB
Jul 29, 2025

sergeyd108 Jul 30, 2025
Author

sergeyd108 Jul 30, 2025
Author

sergeyd108 Jul 30, 2025
Author

sergeyd108
Jul 31, 2025
Author

sergeyd108 Jul 31, 2025
Author

sergeyd108 Jul 31, 2025
Author