Async route guards in Solid Router, and serverside props (not using SolidStart)
I'm building something very similar to Interia.js with a Go backend and a Solid frontend. Pages are rendered by a Node process that uses
renderToStringAsync, and clientside pages are hydrated.
See below for the rest of the thread.6 Replies
When a request is made, serialized props are sent by the Go backend to the Node process. The Node process deserializes the props and passes them to the
App component to do the initial render.
The client entrypoint gets the same props by finding them from a global that was appended to the page as an inline script.
Both entrypoints construct an AppCtx object which holds the current page props. Page props can be accessed and decoded by pages.
This works fine when there is no clientside routing, but it quickly falls apart once pages are switched without a serverside render. What Inertia.js does is exposes serverside props without renders when you add a specific prefix to a route, and I've chosen a similar approach. I've designed my backend such that requesting
/home will render a page, but requesting /home?__data=1 will skip rendering and only return serialized props. The goal is to fetch route props before switching the page during a clientside render, thereby avoiding a costly server render and keeping the application feeling nice and snappy.
To enable clientside route changes to fetch new page props asynchronously, it needs to know what URL it's routing to (including query parameters), and then perform an async fetch of the props for that page so it can populate context before mounting the new page component. Is this possible with Solid Router? I haven't found anything that can make this work so far.There's a
useBeforeLeave hook that allows to "hook" into the routing process:
https://docs.solidjs.com/solid-router/reference/primitives/use-before-leave#usebeforeleaveuseBeforeLeave - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
Hmm, maybe that can work if I wrap every page component in it.