Lazy load props and SSR. Lazy Hydration? Dedupe fetch?

[stefanocurnis]

Hi all,

My question is related to Vue and Laravel, but is valid for other frameworks too.

I'm trying to lazy load all my props in order to have an instant switch of the Page component as soon as I click on a Link.
I'm calling a "Inertia.reload" onMounted, where I fetch all my props. When the "lazy loading" has finished, I reset my loading states.

Then I tried to enable SSR, because I'd like the server to send out the HTML with my props already fetched.
Vue's onMounted is not called by the server renderer, so I've duplicated my fetch requests and I've added one in the <script setup>:

• 1 fetch() for the server
• 1 Inertia.reload for the client.

It's ugly, it kinda works.
Problem: the client then gives Hydration mismatch because the client and server's HTML are different. Client is trying to hydrate my page while on loading state, but the server is rendering the full page with all props fetched.

How do you guys achieve this? Is this something that hasn't been addressed yet by Inertia?
Here's what the Nuxt guys are doing: https://nuxt.com/docs/api/composables/use-fetch

A way to postpone the hydration by the client could work, maybe?
I'm a noob here, so I'd like to see if I'm missing something or is it something that's not doable with this tool.

Thank you all!