{"id":25162931,"url":"https://github.com/themgoncalves/react-loadable-ssr-addon","last_synced_at":"2025-04-06T10:13:51.684Z","repository":{"id":46635782,"uuid":"148283577","full_name":"themgoncalves/react-loadable-ssr-addon","owner":"themgoncalves","description":"Server Side Render add-on for React Loadable. Load splitted chunks was never that easy.","archived":false,"fork":false,"pushed_at":"2021-10-02T15:06:57.000Z","size":1198,"stargazers_count":69,"open_issues_count":3,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T09:08:26.417Z","etag":null,"topics":["chunks","react","react-loadable","server-side-rendering","splitted-chunks","webpack"],"latest_commit_sha":null,"homepage":"https://themgoncalves.gitbook.io/react-loadable-ssr-aadon/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themgoncalves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-11T08:12:16.000Z","updated_at":"2024-04-30T08:12:26.000Z","dependencies_parsed_at":"2022-07-20T08:32:03.325Z","dependency_job_id":null,"html_url":"https://github.com/themgoncalves/react-loadable-ssr-addon","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-loadable-ssr-addon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-loadable-ssr-addon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-loadable-ssr-addon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themgoncalves%2Freact-loadable-ssr-addon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themgoncalves","download_url":"https://codeload.github.com/themgoncalves/react-loadable-ssr-addon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464224,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chunks","react","react-loadable","server-side-rendering","splitted-chunks","webpack"],"created_at":"2025-02-09T03:30:53.702Z","updated_at":"2025-04-06T10:13:51.664Z","avatar_url":"https://github.com/themgoncalves.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Loadable SSR Add-on\n\u003e Server Side Render add-on for React Loadable. Load splitted chunks was never that easy.\n\n[![NPM][npm-image]][npm-url]\n[![CircleCI][circleci-image]][circleci-url]\n[![GitHub All Releases][releases-image]][releases-url]\n[![GitHub stars][stars-image]][stars-url]\n[![Known Vulnerabilities][vulnerabilities-image]][vulnerabilities-url]\n[![GitHub issues][issues-image]][issues-url]\n[![Awesome][awesome-image]][awesome-url]\n\n## Description\n\n`React Loadable SSR Add-on` is a `server side render` add-on for [React Loadable](https://github.com/jamiebuilds/react-loadable)\nthat helps you to load dynamically all files dependencies, e.g. `splitted chunks`, `css`, etc.\n\nOh yeah, and we also **provide support for [SRI (Subresource Integrity)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)**.\n\n\u003cbr /\u003e\n\n## Installation\n\n**Download our NPM Package**\n\n```sh\nnpm install react-loadable-ssr-addon\n# or\nyarn add react-loadable-ssr-addon\n```\n\n**Note**: `react-loadable-ssr-addon` **should not** be listed in the `devDependencies`.\n\n\u003cbr /\u003e\n\n## How to use\n\n### 1 - Webpack Plugin\n\nFirst we need to import the package into our component;\n\n```javascript\nconst ReactLoadableSSRAddon = require('react-loadable-ssr-addon');\n\nmodule.exports = {\n  entry: {\n    // ...\n  },\n  output: {\n    // ...\n  },\n  module: {\n    // ...\n  },\n  plugins: [\n    new ReactLoadableSSRAddon({\n      filename: 'assets-manifest.json',\n    }),\n  ],\n};\n```\n\n\u003cbr /\u003e\n\n### 2 - On the Server\n\n\n```js\n// import `getBundles` to map required modules and its dependencies\nimport { getBundles } from 'react-loadable-ssr-addon';\n// then import the assets manifest file generated by the Webpack Plugin\nimport manifest from './your-output-folder/assets-manifest.json';\n\n...\n\n// react-loadable ssr implementation\nconst modules = new Set();\n\nconst html = ReactDOMServer.renderToString(\n\u003cLoadable.Capture report={moduleName =\u003e modules.add(moduleName)}\u003e\n  \u003cApp /\u003e\n\u003c/Loadable.Capture\u003e\n);\n\n...\n\n// now we concatenate the loaded `modules` from react-loadable `Loadable.Capture` method\n// with our application entry point\nconst modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)];\n// also if you find your project still fetching the files after the placement\n// maybe a good idea to switch the order from the implementation above to\n// const modulesToBeLoaded = [...Array.from(modules), ...manifest.entrypoints];\n// see the issue #6 regarding this thread\n// https://github.com/themgoncalves/react-loadable-ssr-addon/issues/6\n\n// after that, we pass the required modules to `getBundles` map it.\n// `getBundles` will return all the required assets, group by `file type`.\nconst bundles = getBundles(manifest, modulesToBeLoaded);\n\n// so it's easy to implement it\nconst styles = bundles.css || [];\nconst scripts = bundles.js || [];\n\nres.send(`\n  \u003c!doctype html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e...\u003c/head\u003e\n    ${styles.map(style =\u003e {\n      return `\u003clink href=\"/dist/${style.file}\" rel=\"stylesheet\" /\u003e`;\n    }).join('\\n')}\n    \u003cbody\u003e\n      \u003cdiv id=\"app\"\u003e${html}\u003c/div\u003e\n      ${scripts.map(script =\u003e {\n        return `\u003cscript src=\"/dist/${script.file}\"\u003e\u003c/script\u003e`\n      }).join('\\n')}\n  \u003c/html\u003e\n`);\n```\n\nSee how easy to implement it is?\n\n\u003cbr /\u003e\n\n## API Documentation\n\n### Webpack Plugin options\n\n#### `filename`\n\nType: `string`\nDefault: `react-loadable.json`\n\nAssets manifest file name. May contain relative or absolute path.\n\n\n#### `integrity`\n\nType: `boolean`\nDefault: `false`\n\nEnable or disable generation of [Subresource Integrity (SRI).](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) hash.\n\n#### `integrityAlgorithms`\n\nType: `array`\nDefault: `[ 'sha256', 'sha384', 'sha512' ]`\n\nAlgorithms to generate hash.\n\n\n#### `integrityPropertyName`\n\nType: `string`\nDefault: `integrity`\n\nCustom property name to be output in the assets manifest file.\n\n\n**Full configuration example**\n\n```js\nnew ReactLoadableSSRAddon({\n  filename: 'assets-manifest.json',\n  integrity: false,\n  integrityAlgorithms: [ 'sha256', 'sha384', 'sha512' ],\n  integrityPropertyName: 'integrity',\n})\n```\n\n\u003cbr /\u003e\n\n### Server Side\n\n### `getBundles`\n\n```js\nimport { getBundles } from 'react-loadable-ssr-addon';\n\n/**\n * getBundles\n * @param {object} manifest - The assets manifest content generate by ReactLoadableSSRAddon\n * @param {array} chunks - Chunks list to be loaded\n * @returns {array} - Assets list group by file type\n */\nconst bundles = getBundles(manifest, modules);\n\n\nconst styles = bundles.css || [];\nconst scripts = bundles.js || [];\nconst xml = bundles.xml || [];\nconst json = bundles.json || [];\n...\n```\n\n\u003cbr /\u003e\n\n### Assets Manifest\n\n#### `Basic Structure`\n\n```json\n{\n  \"entrypoints\": [ ],\n  \"origins\": {\n    \"app\": [ ]\n  },\n  \"assets\": {\n    \"app\": {\n      \"js\": [\n        {\n          \"file\": \"\",\n          \"hash\": \"\",\n          \"publicPath\": \"\",\n          \"integrity\": \"\"\n        }\n      ]\n    }\n  }\n}\n```\n\n#### `entrypoints`\n\nType: `array`\n\nList of all application entry points defined in Webpack `entry`.\n\n\n#### `origins`\n\nType: `array`\n\nOrigin name requested. List all assets required for the requested origin.\n\n\n#### `assets`\n\nType: `array` of objects\n\nLists all application assets generate by Webpack, group by file type,\ncontaining an `array of objects` with the following format:\n\n```js\n[file-type]: [\n    {\n      \"file\": \"\",       // assets file\n      \"hash\": \"\",       // file hash generated by Webpack\n      \"publicPath\": \"\", // assets file + webpack public path\n      \"integrity\": \"\"   // integrity base64 hash, if enabled\n    }\n]\n```\n\n\u003cbr /\u003e\n\n### Assets Manifest Example\n\n```json\n{\n  \"entrypoints\": [\n    \"app\"\n  ],\n  \"origins\": {\n    \"./home\": [\n      \"home\"\n    ],\n    \"./about\": [\n      \"about\"\n    ],\n    \"app\": [\n      \"vendors\",\n      \"app\"\n    ],\n     \"vendors\": [\n       \"app\",\n       \"vendors\"\n     ]\n  },\n  \"assets\": {\n    \"home\": {\n      \"js\": [\n        {\n          \"file\": \"home.chunk.js\",\n          \"hash\": \"fdb00ffa16dfaf9cef0a\",\n          \"publicPath\": \"/dist/home.chunk.js\",\n          \"integrity\": \"sha256-Xxf7WVjPbdkJjgiZt7mvZvYv05+uErTC9RC2yCHF1RM= sha384-9OgouqlzN9KrqXVAcBzVMnlYOPxOYv/zLBOCuYtUAMoFxvmfxffbNIgendV4KXSJ sha512-oUxk3Swi0xIqvIxdWzXQIDRYlXo/V/aBqSYc+iWfsLcBftuIx12arohv852DruxKmlqtJhMv7NZp+5daSaIlnw==\"\n        }\n      ]\n    },\n    \"about\": {\n      \"js\": [\n        {\n          \"file\": \"about.chunk.js\",\n          \"hash\": \"7e88ef606abbb82d7e82\",\n          \"publicPath\": \"/dist/about.chunk.js\",\n          \"integrity\": \"sha256-ZPrPWVJRjdS4af9F1FzkqTqqSGo1jYyXNyctwTOLk9o= sha384-J1wiEV8N1foqRF7W9SEvg2s/FhQbhpKFHBTNBJR8g1yEMNRMi38y+8XmjDV/Iu7w sha512-b16+PXStO68CP52R+0ZktccMiaI1v0jOy34l/DqyGN7kEae3DpV3xPNoC8vt1WfE1kCAH7dlnHDdp1XRVhZX+g==\"\n        }\n      ]\n    },\n    \"app\": {\n      \"css\": [\n        {\n          \"file\": \"app.css\",\n          \"hash\": \"5888714915d8e89a8580\",\n          \"publicPath\": \"/dist/app.css\",\n          \"integrity\": \"sha256-3y4DyCC2cLII5sc2kaElHWhBIVMHdan/tA0akReI9qg= sha384-vCMVPKjSrrNpfnhmCD9E8SyHdfPdnM3DO/EkrbNI2vd0m2wH6BnfPja6gt43nDIF\"\n        }\n      ],\n      \"js\": [\n        {\n          \"file\": \"app.bundle.js\",\n          \"hash\": \"0cbd05b10204597c781d\",\n          \"publicPath\": \"/dist/app.bundle.js\",\n          \"integrity\": \"sha256-sGdw+WVvXK1ZVQnYHI4FpecOcZtWZ99576OHCdrGil8= sha384-DZZzkPtPCTCR5UOWuGCyXQvsjyvZPoreCzqQGyrNV8+HyV9MdoYZawHX7NdGGLyi sha512-y29BlwBuwKB+BeXrrQYEBrK+mfWuOb4ok6F57kGbtrwa/Xq553Zb7lgss8RNvFjBSaMUdvXiJuhmP3HZA0jNeg==\"\n        }\n      ]\n    },\n    \"vendors\": {\n      \"css\": [\n        {\n          \"file\": \"vendors.css\",\n          \"hash\": \"5a9586c29103a034feb5\",\n          \"publicPath\": \"/dist/vendors.css\"\n        }\n      ],\n      \"js\": [\n        {\n          \"file\": \"vendors.chunk.js\",\n          \"hash\": \"5a9586c29103a034feb5\",\n          \"publicPath\": \"/dist/vendors.chunk.js\"\n        }\n      ]\n    }\n  }\n}\n```\n\n\u003cbr /\u003e\n\n## Release History\n* 1.0.2\n  * FIX: [Fix support for nested `output.path`](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/30)\n  * FIX: [Fix support for common js module](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/31)\n* 1.0.1\n    * FIX: [Webpack v5 deprecation warning](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/27)\n* 1.0.0\n    * BREAKING CHANGE: drop support for Webpack v3.\n    * NEW: add [support for Webpack v5](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/26)\n\u003cdetails\u003e\n  \u003csummary\u003eSee older release note\u003c/summary\u003e\n* 0.3.0\n    * NEW: [`@babel/runtime` become an explicit dependency](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/22) by [@RDIL](https://github.com/RDIL)\n        \u003e Requirement for `yarn v2`.\n* 0.2.3\n    * FIX: [Parsing `null` or `undefined` to object on `getBundles()`](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/21) reported by [@slorber](https://github.com/slorber)\n* 0.2.2\n    * FIX: As precaution measure, downgrade few dependencies due to node SemVer incompatibility.\n* 0.2.1\n    * FIX: [Possible missing chunk](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/20) reported by [@lex111](https://github.com/lex111)\n* 0.2.0\n    * Improvement: Reduce memory consumption ([Issue #17](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/17)) reported by [@endiliey](https://github.com/endiliey)\n* 0.1.9\n    * FIX: [Missing entry in origins](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/13) reported by [@p-j](https://github.com/p-j);\n* 0.1.8\n    * Includes all features from deprecated v0.1.7;\n    * FIX: [Issue #11](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/11) reported by [@endiliey](https://github.com/endiliey)\n* ~~0.1.7 (_deprecated_)~~\n    * FIX: [`Cannot read property 'integrity' of undefined`](https://github.com/themgoncalves/react-loadable-ssr-addon/pull/10) reported by [@nguyenngocphuongnb](https://github.com/nguyenngocphuongnb);\n    * Minor improvements.\n* 0.1.6\n    * FIX: `getManifestOutputPath` method when requested from `Webpack Dev Middleware`;\n* 0.1.5\n    * FIX: [Issue #7](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/7) reported by [@themgoncalves](https://github.com/themgoncalves) and [@tomkelsey](https://github.com/tomkelsey)\n* 0.1.4\n    * FIX: [Issue #5](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/5) reported by [@tomkelsey](https://github.com/tomkelsey)\n* 0.1.3\n    * FIX: [Issue #4](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/4) reported by [@tomkelsey](https://github.com/tomkelsey)\n* 0.1.2\n    * FIX: [Issue #2](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/2) reported by [@tatchi](https://github.com/tatchi)\n* 0.1.1\n    * FIX: [Issue #1](https://github.com/themgoncalves/react-loadable-ssr-addon/issues/1) reported by [@tatchi](https://github.com/tatchi)\n* 0.1.0\n    * First release\n    * NEW: Created `getBundles()` to retrieve required assets\n    * NEW: Created `ReactLoadableSSRAddon` Plugin for Webpack 3+\n* 0.0.1\n    * Work in progress\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Meta\n\n### Author\n**Marcos Gonçalves** – [LinkedIn](http://linkedin.com/in/themgoncalves/) – [Website](http://www.themgoncalves.com)\n\n### License\nDistributed under the MIT license. [Click here](/LICENSE) for more information.\n\n[https://github.com/themgoncalves/react-loadable-ssr-addon](https://github.com/themgoncalves/react-loadable-ssr-addon)\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/themgoncalves/react-loadable-ssr-addon/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -m ':zap: Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n### Emojis for categorizing commits:\n\n⚡️ New feature (`:zap:`)\n🐛 Bug fix (`:bug:`)\n🔥 P0 fix (`:fire:`)\n✅ Tests (`:white_check_mark:`)\n🚀 Performance improvements (`:rocket:`)\n🖍 CSS / Styling (`:crayon:`)\n♿ Accessibility (`:wheelchair:`)\n🌐 Internationalization (`:globe_with_meridians:`)\n📖 Documentation (`:book:`)\n🏗 Infrastructure / Tooling / Builds / CI (`:building_construction:`)\n⏪ Reverting a previous change (`:rewind:`)\n♻️ Refactoring (like moving around code w/o any changes) (`:recycle:`)\n🚮 Deleting code (`:put_litter_in_its_place:`)\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[circleci-image]:https://circleci.com/gh/themgoncalves/react-loadable-ssr-addon.svg?style=svg\n[circleci-url]: https://circleci.com/gh/themgoncalves/react-loadable-ssr-addon\n[vulnerabilities-image]: https://snyk.io/test/github/themgoncalves/react-loadable-ssr-addon/badge.svg\n[vulnerabilities-url]: https://snyk.io/test/github/themgoncalves/react-loadable-ssr-addon\n[issues-image]: https://img.shields.io/github/issues/themgoncalves/react-loadable-ssr-addon.svg\n[issues-url]: https://github.com/themgoncalves/react-loadable-ssr-addon/issues\n[stars-image]: https://img.shields.io/github/stars/themgoncalves/react-loadable-ssr-addon.svg\n[stars-url]: https://github.com/themgoncalves/react-loadable-ssr-addon/stargazers\n[forks-image]: https://img.shields.io/github/forks/themgoncalves/react-loadable-ssr-addon.svg\n[forks-url]: https://github.com/themgoncalves/react-loadable-ssr-addon/network\n[releases-image]: https://img.shields.io/npm/dm/react-loadable-ssr-addon.svg\n[releases-url]: https://github.com/themgoncalves/react-loadable-ssr-addon\n[awesome-image]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\n[awesome-url]: https://github.com/themgoncalves/react-loadable-ssr-addon\n[npm-image]: https://img.shields.io/npm/v/react-loadable-ssr-addon.svg\n[npm-url]: https://www.npmjs.com/package/react-loadable-ssr-addon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemgoncalves%2Freact-loadable-ssr-addon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemgoncalves%2Freact-loadable-ssr-addon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemgoncalves%2Freact-loadable-ssr-addon/lists"}