react-media-match icon indicating copy to clipboard operation
react-media-match copied to clipboard

Partial Hydration based SSR media queries

Open theKashey opened this issue 4 years ago • 1 comments

It's possible to render a "predicted" target during SSR, but the guess might be incorrect. In order to "fix" we have to render everything twice:

  • first with predicted target, to match SSRed markup
  • next with the real target, where some pieces of Application could be rendered a bit differently. And that has a cost.

Proposal

  • MediaMatches might partial hydrate their children, in order to keep existing HTML if targets do not match, and update with a proper markup later.
  • that would reduce the amount of work React has to do.
  • MediaServerRender can do it automatically for a whole application as well.

Should be safe due to a top-level matches provider, which can orchestrate everything below it.

Alternatively

  • expose "couldUseHydration" function, which will propose to use render in case of hydration will lead to a double rendering. It's way faster to drop HTML and render ReactComponent, than to hydrate twice.

theKashey avatar May 23 '20 23:05 theKashey

Don't forget about #11 - almost the same (but the opposite). #36 and #11 could play very nicely together.

thearnica avatar May 24 '20 00:05 thearnica