@loadable/component is a library for React that allows you to dynamically load components. This can help improve the performance of your application by splitting your code into smaller chunks and loading them only when needed.

What are @loadable/component's main functionalities?

Dynamic Import

This feature allows you to dynamically import a component. The component will only be loaded when it is needed, which can help reduce the initial load time of your application.

import loadable from '@loadable/component';

const LoadableComponent = loadable(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <LoadableComponent />
    </div>
  );
}

Server-Side Rendering (SSR) Support

This feature provides support for server-side rendering. It allows you to collect and render the chunks needed for the initial render on the server, ensuring that the client can seamlessly continue rendering.

import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { renderToString } from 'react-dom/server';
import App from './App';

const statsFile = path.resolve('./build/loadable-stats.json');
const extractor = new ChunkExtractor({ statsFile });

const jsx = extractor.collectChunks(<App />);
const html = renderToString(jsx);

const scriptTags = extractor.getScriptTags(); // or extractor.getScriptElements();

Prefetching

This feature allows you to prefetch components. Prefetching can help improve the user experience by loading components in the background before they are needed.

import loadable from '@loadable/component';

const LoadableComponent = loadable(() => import('./MyComponent'), {
  cacheKey: () => 'MyComponent',
  resolveComponent: (components) => components.MyComponent,
  prefetch: true
});

function App() {
  return (
    <div>
      <LoadableComponent />
    </div>
  );
}

Other packages similar to @loadable/component