Server Side Render add-on for React Loadable. Load splitted chunks was never that easy.
React Loadable SSR Add-on
is a server side render
add-on for React Loadable
that helps you to load dynamically all files dependencies, e.g. splitted chunks
, css
, etc.
Oh yeah, and we also provide support for SRI (Subresource Integrity).
Since we have experience some issues with NPM along the time, we strongly recomment the use of YARN Package Manage;
Download our NPM Package
yarn add react-loadable-ssr-addon
# or
npm install react-loadable-ssr-addon
Note: react-loadable-ssr-addon
should not be listed in the devDependencies
.
First we need to import the package into our component;
const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');
module.exports = {
entry: {
// ...
},
output: {
// ...
},
module: {
// ...
},
plugins: [
new ReactLoadableSSRAddon({
filename: 'assets-manifest.json',
}),
],
};
// 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(
<Loadable.Capture report={moduleName => modules.add(moduleName)}>
<App />
</Loadable.Capture>
);
...
// 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(`
<!doctype html>
<html lang="en">
<head>...</head>
${styles.map(style => {
return `<link href="/dist/${style.file}" rel="stylesheet" />`;
}).join('\n')}
<body>
<div id="app">${html}</div>
${scripts.map(script => {
return `<script src="/dist/${script.file}"></script>`
}).join('\n')}
</html>
`);
See how easy to implement it is?
Type: string
Default: react-loadable.json
Assets manifest file name. May contain relative or absolute path.
Type: boolean
Default: false
Enable or disable generation of Subresource Integrity (SRI). hash.
Type: array
Default: [ 'sha256', 'sha384', 'sha512' ]
Algorithms to generate hash.
Type: string
Default: integrity
Custom property name to be output in the assets manifest file.
Full configuration example
new ReactLoadableSSRAddon({
filename: 'assets-manifest.json',
integrity: false,
integrityAlgorithms: [ 'sha256', 'sha384', 'sha512' ],
integrityPropertyName: 'integrity',
})
import { getBundles } from 'react-loadable-ssr-addon';
/**
* getBundles
* @param {object} manifest - The assets manifest content generate by ReactLoadableSSRAddon
* @param {array} chunks - Chunks list to be loaded
* @returns {array} - Assets list group by file type
*/
const bundles = getBundles(manifest, modules);
const styles = bundles.css || [];
const scripts = bundles.js || [];
const xml = bundles.xml || [];
const json = bundles.json || [];
...
{
"entrypoints": [ ],
"origins": {
"app": [ ]
},
"assets": {
"app": {
"js": [
{
"file": "",
"hash": "",
"publicPath": "",
"integrity": ""
}
]
}
}
}
Type: array
List of all application entry points defined in Webpack entry
.
Type: array
Origin name requested. List all assets required for the requested origin.
Type: array
of objects
Lists all application assets generate by Webpack, group by file type,
containing an array of objects
with the following format:
[file-type]: [
{
"file": "", // assets file
"hash": "", // file hash generated by Webpack
"publicPath": "", // assets file + webpack public path
"integrity": "" // integrity base64 hash, if enabled
}
]
{
"entrypoints": [
"app"
],
"origins": {
"./home": [
"home"
],
"./about": [
"about"
],
"app": [
"vendors",
"app"
],
"vendors": [
"app",
"vendors"
]
},
"assets": {
"home": {
"js": [
{
"file": "home.chunk.js",
"hash": "fdb00ffa16dfaf9cef0a",
"publicPath": "/dist/home.chunk.js",
"integrity": "sha256-Xxf7WVjPbdkJjgiZt7mvZvYv05+uErTC9RC2yCHF1RM= sha384-9OgouqlzN9KrqXVAcBzVMnlYOPxOYv/zLBOCuYtUAMoFxvmfxffbNIgendV4KXSJ sha512-oUxk3Swi0xIqvIxdWzXQIDRYlXo/V/aBqSYc+iWfsLcBftuIx12arohv852DruxKmlqtJhMv7NZp+5daSaIlnw=="
}
]
},
"about": {
"js": [
{
"file": "about.chunk.js",
"hash": "7e88ef606abbb82d7e82",
"publicPath": "/dist/about.chunk.js",
"integrity": "sha256-ZPrPWVJRjdS4af9F1FzkqTqqSGo1jYyXNyctwTOLk9o= sha384-J1wiEV8N1foqRF7W9SEvg2s/FhQbhpKFHBTNBJR8g1yEMNRMi38y+8XmjDV/Iu7w sha512-b16+PXStO68CP52R+0ZktccMiaI1v0jOy34l/DqyGN7kEae3DpV3xPNoC8vt1WfE1kCAH7dlnHDdp1XRVhZX+g=="
}
]
},
"app": {
"css": [
{
"file": "app.css",
"hash": "5888714915d8e89a8580",
"publicPath": "/dist/app.css",
"integrity": "sha256-3y4DyCC2cLII5sc2kaElHWhBIVMHdan/tA0akReI9qg= sha384-vCMVPKjSrrNpfnhmCD9E8SyHdfPdnM3DO/EkrbNI2vd0m2wH6BnfPja6gt43nDIF"
}
],
"js": [
{
"file": "app.bundle.js",
"hash": "0cbd05b10204597c781d",
"publicPath": "/dist/app.bundle.js",
"integrity": "sha256-sGdw+WVvXK1ZVQnYHI4FpecOcZtWZ99576OHCdrGil8= sha384-DZZzkPtPCTCR5UOWuGCyXQvsjyvZPoreCzqQGyrNV8+HyV9MdoYZawHX7NdGGLyi sha512-y29BlwBuwKB+BeXrrQYEBrK+mfWuOb4ok6F57kGbtrwa/Xq553Zb7lgss8RNvFjBSaMUdvXiJuhmP3HZA0jNeg=="
}
]
},
"vendors": {
"css": [
{
"file": "vendors.css",
"hash": "5a9586c29103a034feb5",
"publicPath": "/dist/vendors.css"
}
],
"js": [
{
"file": "vendors.chunk.js",
"hash": "5a9586c29103a034feb5",
"publicPath": "/dist/vendors.chunk.js"
}
]
}
}
}
- 0.1.6
- FIX:
getManifestOutputPath
method when requested fromWebpack Dev Middleware
;
- FIX:
- 0.1.5
- FIX: Issue #7 reported by @themgoncalves and @tomkelsey
- 0.1.4
- FIX: Issue #5 reported by @tomkelsey
- 0.1.3
- FIX: Issue #4 reported by @tomkelsey
- 0.1.2
- 0.1.1
- 0.1.0
- First release
- NEW: Created
getBundles()
to retrieve required assets - NEW: Created
ReactLoadableSSRAddon
Plugin for Webpack 3+
- 0.0.1
- Work in progress
Marcos Gonçalves – LinkedIn – Website
Distributed under the MIT license. Click here for more information.
https://github.com/themgoncalves/react-loadable-ssr-addon
- Fork it (https://github.com/themgoncalves/react-loadable-ssr-addon/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -m ':zap: Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request