I&#39;ve noticed that the `reactDOM.renderToString()` method starts to slow down significantly when rendering a large component tree on the server. 

## Background
A bit of background. The system is a fully isomorphic stack. The highest level `App` component renders templates, pages, dom elements, and more components. Looking in the react code, I found it renders ~1500 components (this is inclusive of any simple dom tag that gets treated as a simple component, `&lt;p&gt;this is a react component&lt;/p&gt;`.

In development, rendering ~1500 components takes ~200-300ms. By removing some components I was able to get ~1200 components to render in ~175-225ms. 

In production, renderToString on ~1500 components takes around ~50-200ms.

The time does appear to be linear. No one component is slow, rather it is the sum of many.

## Problem
This creates some problems on the server. The lengthy method results in long server response times. The TTFB is a lot higher than it should be. With api calls and business logic the response should be 250ms, but with a 250ms renderToString it is doubled! Bad for SEO and users. Also, being a synchronous method, `renderToString()` can block the node server and backup subsequent requests (this could be solved by using 2 separate node servers: 1 as a web server, and 1 as a service to solely render react).


## Attempts

Ideally, it would take 5-50ms to renderToString in production. I&#39;ve been working on some ideas, but I&#39;m not exactly sure what the best approach would be.


### Idea 1: Caching components
Any component that is marked as &#39;static&#39; could be cached. By keeping a cache with the rendered markup, the `renderToString()` could check the cache before rendering. If it finds a component, it automatically grabs the string. Doing this at a high level component would save all the nested children component&#39;s mounting. You would have to replace the cached component markup&#39;s react rootID with the current rootID.

### Idea 2: Marking components as simple/dumb
By defining a component as &#39;simple&#39;, react should be able to skip all the lifecycle methods when rendering. React already does this for the core react dom components (`&lt;p/&gt;`, `&lt;h1/&gt;`, etc). Would be nice to extend custom components to use the same optimization.

### Idea 3: Skip components on server-side render
Components that do not need to be returned by the server (no SEO value) could simply be skipped on the server. Once the client loads, set a `clientLoaded` flag to `true` and pass it down to enforce a re-render.


### Closing and other attempts
The only solution I&#39;ve implemented thus far is to reduce the number of components that are rendered on the server. 


Some projects we&#39;re looking at include:

- [React-dom-stream][1]  (still working on implementing this for a test)
- [Babel inline elements][2]  (seems like this is along the lines of Idea 2)

Has anybody faced similar issues? What have you been able to do?
Thanks.


  [1]: https://github.com/aickin/react-dom-stream
  [2]: https://babeljs.io/docs/plugins/transform-react-inline-elements/

All Isomorphic Javascript Solutions on Gang of Coders

Total of 1 Isomorphic Javascript Solutions

React renderToString() Performance and Caching React Components