Nuxt•5mo ago•

18 replies

Vue/Nuxt SSR `onServerPrefetch` timing issue

Context

In a Nuxt 4 / Vue 3 SSR app, I have data that is fetched in a child component’s

onServerPrefetch()

onServerPrefetch()

and written into a shared state (

useState('page-context')

useState('page-context')

).

However, I want to display that state in a parent component — for example in

app.vue

app.vue

or a layout — at render time on the server.

Example:

<!-- app.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()
</script>

<template>
  <div>
    Context: {{ $pageContext.value }}
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- app.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()
</script>

<template>
  <div>
    Context: {{ $pageContext.value }}
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- pages/index.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()

onServerPrefetch(async () => {
  await sleep(1500)
  $pageContext.setPageContext({
    fromPageContext: 'set in pages/index.vue prefetch'
  })
})
</script>

<template>
  <div>Hi from page</div>
</template>

<!-- pages/index.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()

onServerPrefetch(async () => {
  await sleep(1500)
  $pageContext.setPageContext({
    fromPageContext: 'set in pages/index.vue prefetch'
  })
})
</script>

<template>
  <div>Hi from page</div>
</template>

What happens

- On the server, the HTML produced contains

Context: {}

Context: {}

(empty object).
- On the client after hydration, the reactive state now includes

{ fromPageContext: "set in pages/index.vue prefetch" }

{ fromPageContext: "set in pages/index.vue prefetch" }

.
- This causes a hydration text mismatch because the server HTML and
the hydrated state differ.

Console warning:

[Vue warn]: Hydration text mismatch
  - rendered on server: "Context: {}"
  - expected on client: "Context: { fromPageContext: ... }"

[Vue warn]: Hydration text mismatch
  - rendered on server: "Context: {}"
  - expected on client: "Context: { fromPageContext: ... }"

What I tried

- Wrapping

<NuxtPage>

<NuxtPage>

with

<Suspense>

<Suspense>

app.vue

app.vue

→ no effect (Nuxt already
uses internal Suspense around pages).
- Waiting for

app:rendered

app:rendered

hook in a plugin → blocks forever (app already
started rendering).
- Tracking global prefetch state manually → SSR doesn’t emit updates mid-render.

Nuxt•5mo ago•

18 replies

ChronicStone

Vue/Nuxt SSR `onServerPrefetch` timing issue

Context

In a Nuxt 4 / Vue 3 SSR app, I have data that is fetched in a child component’s

onServerPrefetch()

onServerPrefetch()

and written into a shared state (

useState('page-context')

useState('page-context')

).

However, I want to display that state in a parent component — for example in

app.vue

app.vue

or a layout — at render time on the server.

Example:

<!-- app.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()
</script>

<template>
  <div>
    Context: {{ $pageContext.value }}
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- app.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()
</script>

<template>
  <div>
    Context: {{ $pageContext.value }}
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- pages/index.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()

onServerPrefetch(async () => {
  await sleep(1500)
  $pageContext.setPageContext({
    fromPageContext: 'set in pages/index.vue prefetch'
  })
})
</script>

<template>
  <div>Hi from page</div>
</template>

<!-- pages/index.vue -->
<script setup lang="ts">
const { $pageContext } = useNuxtApp()

onServerPrefetch(async () => {
  await sleep(1500)
  $pageContext.setPageContext({
    fromPageContext: 'set in pages/index.vue prefetch'
  })
})
</script>

<template>
  <div>Hi from page</div>
</template>

What happens

- On the server, the HTML produced contains

Context: {}

Context: {}

(empty object).
- On the client after hydration, the reactive state now includes

{ fromPageContext: "set in pages/index.vue prefetch" }

{ fromPageContext: "set in pages/index.vue prefetch" }

.
- This causes a hydration text mismatch because the server HTML and
the hydrated state differ.

Console warning:

[Vue warn]: Hydration text mismatch
  - rendered on server: "Context: {}"
  - expected on client: "Context: { fromPageContext: ... }"

[Vue warn]: Hydration text mismatch
  - rendered on server: "Context: {}"
  - expected on client: "Context: { fromPageContext: ... }"

What I tried

- Wrapping

<NuxtPage>

<NuxtPage>

with

<Suspense>

<Suspense>

app.vue

app.vue

→ no effect (Nuxt already
uses internal Suspense around pages).
- Waiting for

app:rendered

app:rendered

hook in a plugin → blocks forever (app already
started rendering).
- Tracking global prefetch state manually → SSR doesn’t emit updates mid-render.

Vue/Nuxt SSR `onServerPrefetch` timing issue

Context

What happens

What I tried

Similar Threads

Vue/Nuxt SSR `onServerPrefetch` timing issue

Context

What happens

What I tried

Similar Threads

Similar Threads

Similar Threads