rturnq / solid-router

A router for solid-js
MIT License
42 stars 1 forks source link

Add documentation for usage with ssr #18

Open BeneStem opened 3 years ago

BeneStem commented 3 years ago

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 commented 3 years ago

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

rturnq commented 3 years ago

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:

I'm also considering making pathIntegration() the default on the client just to cut down verbosity.

BeneStem commented 3 years ago

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!

rturnq commented 3 years ago

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.