Add a way to delay hydration in development

[gaearon]

Describe the feature you'd like to request

Currently, there's no great way (that I'm aware of) to test server-only HTML in development. I have to:

1. Either pause the debugger before hydration (annoying)
2. Or build for production and then load the page with "Disable JS"

Describe the solution you'd like

I need an easy way to see what my page looks like before hydration. Ideally, with a way to force it. Maybe this should be implemented in React DevTools instead but this will likely take a while. A quick hacky (but official) way would be nice. E.g. a magic ?pause-hydration that renders server HTML + a "play" button to manually kick off hydration

Describe alternatives you've considered

• Doing it in React DevTools (seems ideal)
• What I already wrote above

[icyJoseph]

I made a function (delayHydration), that appends a button to the body, and returns a promise that adds an event listener to the button, and resolves when a click happens.

I then placed it inside /next/client/next-dev.js, where a hydration hook is used. It is called beforeRender:

return hydrate({ beforeRender }).then(() => {
      initOnDemandEntries()
      let buildIndicatorHandler = () => {}

And I define beforeRender as:

    const beforeRender = async () => {
      await displayContent()
      await delayHydration()
    }

The displayContent function was already there, and it has to do with style-loader FOUC during development. So hydration already has some kind of frame delay.

And it looks like that does the trick. I'll open an PR soon, I just need to figure out how to read from the config.experimental (I guess?) from next.config.js, or fallback on the magic query. Also gotta figure out how to test this one out.

If I struggle I'll just open the PR as WIP and ask for help 😅 .

Edit

I opened a PR #40404, hopefully it can be discussed further there.