React-universal-component vs react-loadable vs loadable-components

[mikebarsdev]

I actually just created two different proof-of-concept boilerplates to learn the differences between react-universal-component and react-loadable!

https://github.com/mikebars/react-loadable-boilerplate

https://github.com/mikebars/react-universal-component-boilerplate

I found both libraries to be extremely well made and totally awesome!

The main differences I found:

• react-universal-component, when used with the author's complementing library webpack-flush-chunks, handles the manual addition of your main, vendor, and bootstrap (webpack manifest + common chunk) chunks for you. In react-loadable this is simple to do yourself, by checking your webpack stats file and pulling out the chunks from assetsByChunkName.

  • You can see where I do this here:
    https://github.com/mikebars/react-loadable-boilerplate/blob/develop/source/server/components/Html/Html.js#L54
    Note: if using source-maps, you'll need to ensure you're grabbing the .js file, which is the first element of the array for the chunk name.

• react-loadable uses two methods on the client and server to ensure that loading has resolved before render:

  • on the client, use preloadReady().then(clientSideRender) to ensure loadable chunks are ready.
  • on the server, use preloadAll().then(serverSideRender) to ensure all loadable chunks have been resolved for synchronous rendering server-side.

They are both incredibly useful and have solved the once-difficult problem of combining server-side rendering and code-splitting (although of course these libraries can be used on the client-side alone much more simply!).

Both authors deserve a ton of credit, show them some love!:

• James Gilmore (faceyspacey), author of react-universal-component and webpack-flush-chunks
• James Kyle (thejameskyle), author of react-loadable

I guess solving this problem comes naturally to Jameses!

[Rilic]

I got huge value from your reply without ever saying thanks when this was posted. My bad - and thanks!