Nuxt•7mo ago

Noob question about hydration in SSR

Hi,

<template>
  {{ result }}
</template>

<script setup>
  const result = ref("")
  const callAPI = async () => {
    result.value = await useFetch("/api/Test")
  }
    callAPI()
</script>

<template>
  {{ result }}
</template>

<script setup>
  const result = ref("")
  const callAPI = async () => {
    result.value = await useFetch("/api/Test")
  }
    callAPI()
</script>

this is my page component

export default defineEventHandler(async (event) => {
  return { message: "cool" }
})

export default defineEventHandler(async (event) => {
  return { message: "cool" }
})

this is the api/Test.js why does this cause a hydration missmatch?

3 Replies

Likonima•7mo ago

because you're not awaiting the function call. Another thing is that you should not use useFetch inside a function and another thing is that you should probably use useAsyncData for that one and to be conform with standards I'd recommend a lowercase file name

abdOP•7mo ago

@Likonima thanks for the reply: 1. duh. I dont have await on the function call itself 2. why not use usefetch inside a function? 3. why asynData vs. usefetch? I understood that useFetch is just a syntax wrapper around asyndata?

Likonima•7mo ago

useAsyncData is used if you need the data on server side without re-fetching the data on client side and offers more fine grained control. Reading up on it it seems not relevant which one to chose though for your case. in nuxt 2 async data was a method to handle any logic server side, and I kept the concept like this in my head. It's definitely handy when you have built your own ofetch base and use that to make api calls. that can then be used in the useAsyncData. or NuxtContent can be fetched in there. https://www.youtube.com/watch?v=njsGVmcWviY https://nuxt.com/docs/getting-started/data-fetching https://www.youtube.com/watch?v=0X-aOpSGabA

Alexander Lichter

YouTube

You are using useFetch WRONG! (I hope you don't)

💪🏻 useFetch is a mighty composable to fetch data in your Nuxt.js application. It can do so many things, from updating state to refreshing calls easily and even data caching is possible. But often I see that people misuse useFetch because it is so tempting to use all the features, even when you shouldn't. In this video I show the most common mist...

Nuxt

Data fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

Alexander Lichter

YouTube

useAsyncData vs. useFetch 🤯

🪄 Data fetching is essential in every application - also when using Nuxt. Luckily, useAsyncData and useFetch are provided by the framework to make data fetching a breeze. But how do they work? Which should you use? And why are there TWO? All that will be answered in this video 🙌🏻 Key points: 🎛️ What data composables are! 🔄 $fetch as fetching fu...

Gaming

Programming

Noob question about hydration in SSR