What this article should have linked to: https://github.com/walmartlabs/react-ssr-optimization

> After peeling through the React codebase we discovered React’s mountComponent function. This is where the HTML markup is generated for a component. We knew that if we could intercept React's instantiateReactComponent module by using a require() hook we could avoid the need to fork React and inject our optimization. We keep a Least-Recently-Used (LRU) cache that stores the markup of rendered components (replacing the data-reactid appropriately).

> We also implemented an enhancement that will templatize the cached rendered markup to allow for more dynamic props. Dynamic props are replaced with template delimiters (i.e. ${ prop_name }) during the react component rendering cycle. The template is them compiled, cached, executed and the markup is handed back to React. For subsequent requests the component's render(..) call is short-circuited with an execution of the cached compiled template.

jotto

> After peeling through the React codebase

Except you don't have to peel through their code base or intercept any calls, they expose a clean interface for this: https://github.com/facebook/react-devtools

You can capture it like this:

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(obj) {
    // obj.Mount
  }

Which is how we're doing SSR at https://www.prerender.cloud/ for compatibility across React versions.

spicyj

Please know this is not supported.

jotto

Not supported, as in, the react-devtools that rely on it could break at any moment? Or just that you don't officially document the API?

spicyj

The latter – and it is likely that we will change this API in the future and update the devtools to match. No guarantee that your monkeypatch will continue to be possible, especially as we rewrite large parts of the internals (https://github.com/acdlite/react-fiber-architecture).