Partial server-side render of sub-components good Idea?

(Sujitwarrier11) #1

I have been asked to render sub-components server-side, fetch the HTML string via an API call and Set it dangerously to an HTML. they dont want the parent Container component to re-render each time. Is this even possible? The events obviously don’t get attached to the rendered HTML. Even if this was possible is it a good idea?

(Troy Rhinehart) #2

Totally possible, just a horrible idea.

React uses a Virtual DOM to determine what attributes/elements need to be updated when changes occur. This way the cost of DOM updates per render call are minimized to only what is needed, or avoided altogether.

When you use dangerouslySetInnerHTML, you simply replace the DOM tree every render call which can be very unperformant depending on the size and complexity of the tree. As you stated, you also lose JS events since SSR only outputs static HTML and things like onClick are removed.

(jalooc) #3

Not necessarily the DOM is replaced with every render. The obvious strategy here would be to implement shouldComponentUpdate() { return false }. That’s always the way to go if you have a component which children should not be touched by React mechanics.

But is the idea in question any good? Normally I’d agree it’s terrible, but on the other hand, I can imagine scenarios where it’d work (like having a completely static html footer, on which we’d like to spare some React render cycles). That’s a bit more advanced solution though - it requires some proper, non-standard setup. I wouldn’t go this way if you’re not experienced in React