React Loadable: Code Splitting with Server Side Rendering

When you have a large enough application, a single large bundle with all of your code becomes a problem for startup time. You need to start breaking your app into separate bundles and load them dynamically when needed.

Splitting a single bundle into several ones is a well-solved problem with tools like Browserify and Webpack.

But now you need to find places in your application where you can split off into another bundle and load it asynchronously. You also need a way to communicate between server and client, and need to organize server side rendering and implement universal data fetching for your application.

Even React Router team failed with this task, as shown in its documentation: "We’ve tried and failed a couple of times".

The talk will show how to solve this problem using a library called React Loadable.

Also, we will look at some solutions which you can achieve with React Router v4 and why they are not the best ones.

For this talk, you will need some knowledge in React, Babel (ES6), Node, Webpack 2, Redux, and little bit React Router v4.

Talk language: RU

Download presentation.

George Bukhanov

George Bukhanov

Works as a Senior Frontend Developer for more than four years. Specializes in creating complicated single page applications (SPA) with Node.js, React, Redux, redux-saga and other top notch web technologies like webpack 2, babel, react-router, immutable, post-CSS, eslint etc. Last 2 years I worked at Oppex, finish startup where we built a great react application with technologies described above. I still think that Oppex is a state of the art of currently react development. Right now I'm working at Toughbyte, also finish company, where I help other companies and startups to build a good architecture for their tech stack, and building a team that knows how to build products. Overall I have a various experience starting from desktop applications, servers and ending native mobile development.