Should I use react-loadable or loadable-components for code splitting?

Question

I want to split my react code with server side rendering. To do that I have two options.

• loadable-components
• react-loadable

loadable-components

React documentation suggested to use loadable-components for server rendered apps. But it has very few NPM weekly downloads.

react-loadable

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.

Sew

Answer 1

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.

Sew

I always get a warning when using react-loadable. how did you do about that? – Silverstein

Answer 2

you can use React.lazy. This will automatically load the bundle containing the OtherComponent when this component gets rendered.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

Alive

react lazy doesn't support server side rendering. LINK – Sew

try using import(), for more detail see this post – Alive

Answer 3

FWIW loadable-components is recommended by the React team

Also, React.lazy does not currently support SSR (as of May 2020)

Heterochromous

Thanks for reminding me why I chose it in the first place :D – Surratt