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.

score 7 · Accepted Answer · answered Jan 29 '19 at 04:41

7

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.

answered Jan 29 '19 at 04:41

Swaroop Deval

906
5
22

I always get a warning when using react-loadable. how did you do about that? – Bryan Lumbantobing Dec 07 '20 at 04:31

score 0 · Answer 2 · answered Jan 25 '19 at 07:16

0

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>
  );
}

answered Jan 25 '19 at 07:16

Tayyab Razzaq

461
3
11

15

react lazy doesn't support server side rendering. [LINK](https://reactjs.org/docs/code-splitting.html#reactlazy) – Swaroop Deval Jan 25 '19 at 08:04
try using `import()`, for more detail see this [post](https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70) – Tayyab Razzaq Jan 25 '19 at 09:51

score 0 · Answer 3 · answered May 24 '20 at 18:46

0

FWIW loadable-components is recommended by the React team

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

answered May 24 '20 at 18:46

ok_anthony

41
3

1

Thanks for reminding me why I chose it in the first place :D – Ahmed Mahmoud Jul 20 '20 at 07:33

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

loadable-components

react-loadable

3 Answers3