4 ms·
What this article should have linked to: https://github.com/walmartlabs/react-ssr-optimization https://github.com/walmartlabs/react-ssr-optimization > After pe
by btown 10y ago
What this article should have linked to: https://github.com/walmartlabs/react-ssr-optimization 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 10y ago> 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 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/ https://www.prerender.cloud/ for compatibility across React versions.
- dsp1234 10y ago__REACT_DEVTOOLS_GLOBAL_HOOK__ is present in the React Native and ReactDOM, but not the ReactDOMServer codepaths. So SSR using just renderToString doesn't respect that hook.
- spicyj 10y agoPlease know this is not supported.
- jotto 10y agoNot 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 10y agoThe 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 https://github.com/acdlite/react-fiber-architecture).
- ateevchopra 10y agoThis looks great ! Will try it out and document the perf improvements.