Noob question about hydration in SSR
Hi,
this is my page component
this is the api/Test.js
why does this cause a hydration missmatch?
3 Replies
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@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?
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...