snailyluke
snailyluke
SSolidJS
Created by terenced on 5/2/2024 in #support
Solid +Astro SSR + Data Fetching on hydration
Oh yeah for sure, suspense is the way to go there too! No problem 😊
4 replies
SSolidJS
Created by terenced on 5/2/2024 in #support
Solid +Astro SSR + Data Fetching on hydration
A couple things: 1. solid-js/web actually exports an isServer, which you can use to check if you’re server rendering. So no need to define it yourself! 2. Your isSSR signal (and Solid’s isServer for that matter) isn’t really reactive. Even though the value technically “changes” when it goes from the server to the client, the server is a separate reactive context from the client. So the change in value won’t be detected on hydration and the resource won’t run again. So it being a signal doesn’t actually do anything here to refetch the resource. A signal from createSignal only triggers effects if its setter is called and changes the value. Otherwise it won’t do anything. Since you’re not creating or using a setIsSSR (because why would you for this?), it won’t trigger the refetch. Also, Astro runs your Solid components inside a Suspense block, which (I believe) means that resources will all run on SSR and not on hydration (but can still be re-run client-side). This behavior in Astro is relatively new though so I might have a few things wrong I would recommend changing the isSSR to Solid’s isServer, or using Vite’s import.meta.env.SSR, and just check it directly in your fetchCurrent function rather than passing it in as a signal (though either way is fine! It’s just not reactive) Then I’d take the refetch method that createResource returns, and call it inside an onMount or createEffect - it’s the same either way, I just like onMount if I know I’m only running something once. Alternatively, you could keep the code you have and just try setting isSSR again in an onMount function or other event handler, which should lead to a refetch as well. ALTERNATIVE alternatively, if you don’t need this component to render on the server at all, because the markup depends on the data you’re fetching, you could use a client:only=“solid-js” on the Solid component in the Astro file
4 replies