Menu
I want to split my react code with server side rendering. To do that I have two options.
React documentation suggested to use loadable-components for server rendered apps. But it has very few NPM weekly downloads.
NPM weekly downloads of this package is very high compared to the previous one but according to loadable-components documentation this package is not maintained any more.
react-loadable was the recommended way for React code splitting for a long time. However, today it is not maintained any more and it is not compatible with Webpack v4+ and Babel v7+. Documentation Link
Please guild me with proper package.
240
Code splitting is possible in a React application using React Loadable. It provides a higher-order component that can be set up to dynamically import specific components at specific times.
This can help tremendously with performance by allowing for a reduced initial bundle size. React Loadable is a library by @jamiebuilds that makes it easy to implement code splitting in React and that embraces React’s component model.
With code splitting, we can ensure that the code for the homepage is the only code that loads, and that the cruft stays out for more optimal loading. Code splitting is possible in a React application using React Loadable. It provides a higher-order component that can be set up to dynamically import specific components at specific times.
However it has some limitations, this is why @loadable/component exists. In a React application, most of the time you want to split your components. Splitting a component implies the ability to wait for this component to be loaded (showing a fallback during loading) but also to handle errors.
Even though documentation of react-loadable says that react-loadable is not compatible with Webpack v4+ and Babel v7+, I used react-loadable and it worked. I did not face any issue in both server and client side rendering applications.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
