Is it possible to create a resource of type HTMLImageElement with SSR?
Is it possible to create a resource of type HTMLImageElement with SSR? The server would have to render the suspense fallback and then load the image right away on hydration.
I tried delaying the resource until onMount, but that wouldn’t render the suspense fallback in the meantime
3 Replies
i'd use https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload. you'd also get browser native caching benefits
if you really want to do it, loading the image in a way it can be serialized by ssr like base64 then using that as src for image might work
I’m aware of preload, I’m just messing around with using images to trigger suspense.
The image doesn't have to load on the server at all. The behavior I'm looking for is
1. Server renders page
2. Sees image in a resource
3. Renders suspense fallback
4. Client hydrates
5. Sees image in a resource
6. Loads image as an offscreen HTMLImageElement asynchronously
7. Hydates fallback
8. Image finishes loading
9. Resource completes with image element inside