N
Nuxt•5mo ago
nathan1658

Question about tranform with useFetch

I've noticed an inconsistency in how the transform function of useFetch behaves in Nuxt 3. Here's a minimal example to illustrate: 
<template>
  <div>
    <button @click="$router.push('/')">Go Back</button>
    <div>{{ data }}</div>
  </div>
</template>

<script setup>
const { data } = useFetch('/api/test', {
  transform: (res) => {
    console.log('Transform executed')
    return res
  },
})
</script>
<template>
  <div>
    <button @click="$router.push('/')">Go Back</button>
    <div>{{ data }}</div>
  </div>
</template>

<script setup>
const { data } = useFetch('/api/test', {
  transform: (res) => {
    console.log('Transform executed')
    return res
  },
})
</script>
I've observed that: 1. When I refresh the page, the transform function executes on the server-side. 2. When I navigate to this page from another page using Vue Router (e.g., $router.push()), the transform function executes on the client-side. Is this the expected behavior? If so, what's the rationale behind it? Thank you.
2 Replies
Cue
Cue•5mo ago
Yes, this is expected behaviour. On initial load, the request is made server side. Subsequent navigations happen on the client, not the server, therefore the behaviour is replicated on the client only. As for rationale... this is how SSR works in general. Server render -> hydration -> client takes over.
nathan1658
nathan1658OP•5mo ago
Thanks for the explanation!

Did you find this page helpful?