Optimisations about react-async-component HOT 4 CLOSED

Ok, so to be clear the potential performance issues lie within the server side rendering logic. We have to walk your react element tree prior to render (and execute componentWillMount along the way to keep in line with a "standard" server side render). This allows us to discover AsyncComponent instances and prebake them prior to render. Although this operation isn't as expensive as an actual render as we don't generate the DOM it can still be quite wasteful if you have a deep tree. Therefore to allow for optimisation I am thinking of introducing a new configuration object property for the createAsyncComponent helper: ssrMode. It will support the following values:

• "render" : Default. In this mode a server side render will parse and resolve your AsyncComponent and then continue walking down through the child elements of your resolved AsyncComponent. This is the most expensive operation.
• "defer" : When set your AsyncComponent will not be resolved during server side rendering and will defer to the browser/client for resolving and rendering of it. This is the cheapest operation.
• "boundary" : In this mode your AsyncComponent will be resolved and rendered on the server, however, it's children will not be walked over to try and find nested AsyncComponent instances. If there are any nested instances their resolving and rendering will be deferred to the browser/client.

Understand your own applications needs and use the options appropriately . I personally recommend using mostly "defer" and a bit of "boundary". Try to see code splitting as allowing you to server side render an application shell to give the user perceived performance. Of course there will be requirements otherwise (SEO), but try to isolate these components and use a "boundary" as soon as you feel you can.

Thoughts?

from react-async-component.

Also, the above will deprecate the current "defer" configuration property.

from react-async-component.

Works a treat!

from react-async-component.

Released in 0.2.0 🎉

from react-async-component.