Server side rendering

[simmo]

Describe the feature you'd like:

Support for server side rendering. I have rough implementation in the gist below... me than happy to drop this in a PR.

Suggested implementation:

https://gist.github.com/simmo/9b8d9fb13b5fba513a76a8413eeeb805

Describe alternatives you've considered:

I haven't seen any... yet.

Teachability, Documentation, Adoption, Migration Strategy:

I guess an additional export? Happy to take some guidance! 😄

[mpeyper]

Looks cool.

I wonder how this would feel as an option to renderHook instead of a seperate function? I imagine it's only the initial render that would use the server renderer and subsequent rerender calls would use the existing renderer (with rehydration or something)? I'm quite unfamiliar with server-side rendering, so this might be nonsense.

My other thought is that we recently changed to use react-test-renderer so that we don't need a DOM for testing the hooks. Does this get undone by renderToString from react-dom or does the fact it's the server mean it's still not required?

[simmo]

Hey @mpeyper

I'm thinking out-loud here... I was wondering if we could flag react-dom as an optional dependency as, like you mention, SSR might not be the no.1 use case.

And, yes, you raise a valid point about hydration. For example you'd maybe expect a useInterval hook (example) to return an initial state and then hydrate on the client, triggering useEffect, executing the setInterval.

I'll have a play with react-test-renderer and see what I can come up with. A bit of a head-scratcher!!! 🤔

[mpeyper]

Hey @simmo,

just wondering how you're going with this and if there is anything I can help you with, or if this idea is dead and I can close this issue?

[mpeyper]

Closing this due to inactivity. Happy to reopen if anyone wants to start the discussion back up.

[fabb]

It would be really helpful to have this. I have a hook that produces different values on SSR and CSR based on useEffect and media queries. It would be great if there was a way to unit test this.

[mpeyper]

I'd love some help with this as SSR is completely foreign to me. I don't even understand what is failing/missing in the current implementation to begin looking at this.

I'll reopen this now as I'd also like to see us support more use cases.

[fabb]

On SSR, useEffect hooks are not run.

[mpeyper]

Of course, yes, that's a thing, isn't it... So rendering with react-dom/server skips the effects, but react-test-renderer does not.

I mentioned it before, but would it be important to you that the hook be able to rehydrate and start client rendering, or is just the initial server render the important part for your tests?

[mpeyper]

So I've briefly looked into it, and there does not appear to be a way to use react-test-renderer to hydrate a component from react-dom/server (please let me know if I'm wrong).

So I see three scenarios:

1. Client render

• Render with react-dom, rerender with react-dom

2. Server render

• Render with react-dom/server, rerender by hydrating with react-dom
• Possibly a new API instead of rerender?

3. Non-DOM render (e.g. react-native)

• Render with react-test-renderer, rerender with react-test-renderer
• Is there a better renderer to use for native rendering?

Are there any others I'm not thinking about?

I'm not sure how we can cleanly support all these different renderers at this stage, short of abstracting them away and having some way to configure which one to use.

This is starting to feel a bit like the enzyme adapter's and I'd really like to avoid that if we can.

Any suggestions are welcome.

[fabb]

For my tests I don‘t really care for hydration, SSR-only and CSR-only suffices for my needs.

[mpeyper]

Thanks @fabb. If we implement anything I'd like it to be a complete solution, so I'll strive for that first, but if it's not possible, knowing what is important to users is helpful.