Multiple hydration warnings
I have a problem with hydration and I don't understand.
The problem is when i fetch data in SSR, I have this error in my console
Data loaded are binded in my component Button, or Pager ...
<GridListPager
:pagination="shippingDelaysPagination"
@change-page="(page) => fetchShippingDelays({ page })"
/>
shippingDelaysPagination it's a computed (from data fetch)
At the end of the script setup, i call my fetchData method: await fetchDatas() and they are well loaded in SSR
This is the error message:
Hydration node mismatch:
- Client vnode: Symbol(Fragment)
- Server rendered DOM: <!--]-->
4 Replies
I reproduce the problem even more easily: I make a page with a data fetch.
I'm creating a computed that returns a property of this data to a component.
This component displays the raw data it receives as props.
I have this warning.
How do I make the server-side HTML render only after my fetch?
You'll need to show the data fetching and stuff for us to be able to answer that
At the end of my script setup, i call my fetchDatas function
and this is my repository (useApiFetch custom)
