cssinjs / cssinjs/jss

Add a rehydrate function

Open
#677 2 comments 10 reactions 0 assignees View on GitHub
complexity:moderate feature request important
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

Initially I went against creating a separate rehydrate function, because we decided to not actually do rehydration, but instead just regenerate the styles, because it is fast enough and more robust.

So if I did `jss.rehydrate('.style-selector')´ it would be basically inserting the styles after this element and just removing the old style node.

Now as some people had issues with mismatching selectors from SSR, it makes sense to add some more logic to rehydrate, which will make sure in dev mode that user gets proper error report.

1. Check that client and server setup uses the same NODE_ENV
1. Check the module id matches between ssr and client (first part - module id)
- Check the JSS versions matching between ssr and client
- if hot reload is used and modules are reevaluated, a mismatch is possible
1. Check the JSS instances counter matches between ssr and client. (second part - Jss instance id)
1. If last part is not matching (rule id)
1. Support streaming (https://github.com/cssinjs/react-jss/issues/203)

All checks could be done for e.g. if ssr generates a comment string which contains the information (dev mode only). Rehydration call checks the comment and prints a warning or error.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.