Experimental Option: Rendering instead of Hydrate

[deve-sh]

The Perils of Hydration

When building isomorphic React apps, we've all encountered this error at least once:

Text Content did not match. Server: ... Client: ...

Most of the time, it's just a warning that can be ignored. But sometimes, it causes major UI breaks.

A great post on this issue: https://www.joshwcomeau.com/react/the-perils-of-rehydration/

Pages with dynamic content, that are static for speed, but have content that can change during rendering face this problem very often.

// Value of `now` will be different for both server and client
const isLive = now >= content.liveAt.start && now < content.liveAt.end;

// The UI that renders based on the `isLive` predicate could break entirely. During hydration, matching DOM nodes on the server and client will not be found.
if (isLive) return <LiveContentCard />
return <RegularContentCard />

Suggestion: An Experimental flag like renderInsteadOfHydrate to always render the app instead of hydrate on the client

Hydration does have performance benefits of course during the first render, as it's expected that the UI would be very similar on the client to that on the server, and due to that, it can find existing DOM Nodes quickly.

But for pages that are not very large, rendering and hydrating would not have a lot of performance difference.

Hence an experimental flag for apps that understand that trade-off, and are in need of this use case would help significantly:

// next.config.js

module.exports = {
  experimental: {
    renderInsteadOfHydrate: true,
  },
}

Pull Request as an Example

I've created a sample Pull Request for the above here: https://github.com/deve-sh/next.js/pull/1/files

Let me know what you guys think.