> For the complete documentation index, see [llms.txt](https://themgoncalves.gitbook.io/react-loadable-ssr-aadon/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themgoncalves.gitbook.io/react-loadable-ssr-aadon/getting-started/usage.md).
# Usage
## Webpack Plugin
First we need to import the package into our component;
```javascript
const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');
module.exports = {
entry: {
// ...
},
output: {
// ...
},
module: {
// ...
},
plugins: [
new ReactLoadableSSRAddon({
filename: 'assets-manifest.json',
}),
],
};
```
## HTTP Server
```javascript
// import `getBundles` to map required modules and its dependencies
import { getBundles } from 'react-loadable-ssr-addon';
// then import the assets manifest file generated by the Webpack Plugin
import manifest from './your-output-folder/assets-manifest.json';
...
// react-loadable ssr implementation
const modules = new Set();
const html = ReactDOMServer.renderToString(
modules.add(moduleName)}>
);
...
// now we concatenate the loaded `modules` from react-loadable `Loadable.Capture` method
// with our application entry point
const modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)];
// also if you find your project still fetching the files after the placement
// maybe a good idea to switch the order from the implementation above to
// const modulesToBeLoaded = [...Array.from(modules), ...manifest.entrypoints];
// see the issue #6 regarding this thread
// https://github.com/themgoncalves/react-loadable-ssr-addon/issues/6
// after that, we pass the required modules to `getBundles` map it.
// `getBundles` will return all the required assets, group by `file type`.
const bundles = getBundles(manifest, modulesToBeLoaded);
// so it's easy to implement it
const styles = bundles.css || [];
const scripts = bundles.js || [];
res.send(`
...
${styles.map(style => {
return ``;
}).join('\n')}
${html}
${scripts.map(script => {
return ``
}).join('\n')}
`);
```
See how easy to implement it is?