Nuxt•4mo ago

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•4mo 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.

nathan1658OP•4mo ago

Thanks for the explanation!

Gaming

Programming

Question about tranform with useFetch