solid-router icon indicating copy to clipboard operation
solid-router copied to clipboard

Add documentation for usage with ssr

Open BeneStem opened this issue 3 years ago • 4 comments

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? :)

BeneStem avatar May 21 '21 21:05 BeneStem

For documentation sake this issue is related to a project which was discussed here: https://github.com/solidjs/solid/discussions/454

BeneStem avatar May 21 '21 22:05 BeneStem

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 into integration. This would give the router the ability to write to the object and the user the chance to read the value 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.

rturnq avatar May 22 '21 05:05 rturnq

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!

BeneStem avatar May 22 '21 10:05 BeneStem

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.

rturnq avatar May 23 '21 06:05 rturnq