@loadable/server

What is @loadable/server?

@loadable/server is a package that provides server-side rendering (SSR) support for code-splitting with @loadable/components. It allows you to preload and render components on the server, ensuring that the necessary chunks are sent to the client for hydration.

What are @loadable/server's main functionalities?

Server-Side Rendering

This feature allows you to collect and render chunks on the server side. The `ChunkExtractor` is used to collect all the chunks needed for the server-rendered application, ensuring that the client receives the necessary scripts for hydration.

const { ChunkExtractor } = require('@loadable/server');
const statsFile = path.resolve(__dirname, 'loadable-stats.json');
const extractor = new ChunkExtractor({ statsFile });
const jsx = extractor.collectChunks(<App />);
const html = ReactDOMServer.renderToString(jsx);

Preloading Chunks

This feature allows you to preload chunks by generating script tags for the chunks that need to be loaded. The `getScriptTags` method returns the necessary script tags to be included in the HTML sent to the client.

const { ChunkExtractor } = require('@loadable/server');
const statsFile = path.resolve(__dirname, 'loadable-stats.json');
const extractor = new ChunkExtractor({ statsFile });
const scriptTags = extractor.getScriptTags();

Style Tags

This feature allows you to collect and render style tags for the chunks. The `getStyleTags` method returns the necessary style tags to be included in the HTML sent to the client, ensuring that styles are correctly applied.

const { ChunkExtractor } = require('@loadable/server');
const statsFile = path.resolve(__dirname, 'loadable-stats.json');
const extractor = new ChunkExtractor({ statsFile });
const styleTags = extractor.getStyleTags();

Other packages similar to @loadable/server

react-loadable

react-loadable is a higher-order component for loading components with dynamic imports. It provides similar functionality for code-splitting and lazy loading but does not have built-in support for server-side rendering like @loadable/server.

react-async

react-async is a library for managing asynchronous operations in React. It provides hooks and components for handling async data fetching and rendering, but it does not focus specifically on code-splitting and server-side rendering like @loadable/server.

README

@loadable/server

Install

npm install @loadable/server

Documentation

👉 See full documentation

License

MIT

Changelog

5.16.5 (2024-04-20)

Note: Version bump only for package loadable-components