solid-router
solid-router copied to clipboard
Add documentation for usage with ssr
Hey there, I was just able to make the router work with ssr in a basic example.
From what I figured, its just about providing your own integration
in the server part of the app/router rendering.
For me the integration looks like:
const ssrIntegration = createIntegration(
() => req.normalisedPath(),
() => undefined
);
You will find the full example here: https://gitlab.com/BeneStem/es4x-flower/-/blob/master/src/server/ServerRouter.tsx#L22
Its probably a nice hint for other people to add this to the documentation.
I saw in you todos, that ssr is still not supported completely. But if you'd go further it would probably be nice to set the current url directly as a prop like for example the vue ssr router is doing it. A full integration with history is probably not even needed on the initial ssr part.
What do you say about that? :)
For documentation sake this issue is related to a project which was discussed here: https://github.com/solidjs/solid/discussions/454
Yeah, that is fair. I need to add some more documentation on the subject and examples of well, everything.
The router component accepts a couple different forms for integration
including a signal. I usually do something like this to support rendering on the server:
<Router integration={isServer ? createSignal({ value: req.originalUrl }) : pathIntegration()}>
<MyApp />
</Router>
Ultimately you could even just pass in a signal-like tuple such as [() => ({ value: req.originalUrl }), () => {}]
This could definitely be improved, though I'm not sure what the best solution would be. I could:
- Add an additional property like
startLocation
which could be useful on the client as well as the server. - Support passing a string into
integration
. - Support passing in a
{ value: String }
type object intointegration
. This would give the router the ability to write to the object and the user the chance to read thevalue
property after rendering in the event of a redirect in case they want to do something with that on the server. - Another option?
I'm also considering making pathIntegration()
the default on the client just to cut down verbosity.
Thank you so much for all that information!
I didn't even think about using isServer
in that context!
Currently I have two files, one for Client and one for Server root... I could merge them ;) Never thought about that :D
I am not sure if I can make the call on which option is best considered. My experience with providing such a framework are very limited.
Vue Router is doing the startLocation
property thing... But the other options sound intriguing as well!
I added a little bit of documentation to the readme in https://github.com/rturnq/solid-router/commit/ffa31c845966d351e211673456d117a03846261c
I'll leave this issue open while I consider how to make this better.