{"library":"react-loadable-ssr-addon-v5-slorber","title":"React Loadable SSR Add-on","description":"React Loadable SSR Add-on (npm package `react-loadable-ssr-addon-v5-slorber`, version 1.0.3) is a specialized server-side rendering utility designed to complement `React Loadable` for managing dynamically loaded JavaScript and CSS assets. It integrates with Webpack via a plugin that generates an `assets-manifest.json` file, detailing all bundled chunks and their dependencies. On the server, it consumes this manifest along with module IDs captured by `Loadable.Capture` to correctly inject the required `<link>` and `<script>` tags into the HTML response. A key differentiator is its optional support for Subresource Integrity (SRI), enhancing security by adding cryptographic hashes to asset links. While the specific package name includes 'v5-slorber', its peer dependencies indicate broad compatibility with `react-loadable` and `webpack` v4/v5, making it a robust solution for ensuring all necessary assets, including code-split chunks, are present during SSR without client-side fetching delays. There is no explicit release cadence stated, but the 1.x.x version implies a stable API.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-loadable-ssr-addon-v5-slorber"],"cli":null},"imports":["const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');","import { getBundles } from 'react-loadable-ssr-addon';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import path from 'path';\nimport ReactLoadableSSRAddon from 'react-loadable-ssr-addon';\n\n// webpack.config.js\n// Simplified Webpack configuration excerpt\nconst webpackConfig = {\n  entry: {\n    main: './src/index.js'\n  },\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: '[name].js',\n    publicPath: '/dist/'\n  },\n  plugins: [\n    new ReactLoadableSSRAddon({\n      filename: 'assets-manifest.json',\n      integrity: true, // Enable SRI for enhanced security\n      integrityAlgorithms: ['sha256']\n    })\n  ]\n};\n\n// server.ts (simplified example)\n// Assume React, ReactDOMServer, and React Loadable are installed and configured\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport Loadable from 'react-loadable';\nimport { getBundles } from 'react-loadable-ssr-addon';\nimport manifest from '../dist/assets-manifest.json'; // Adjust path as needed based on webpack output\n\n// Mock a simple React App component\nconst App = () => React.createElement('h1', null, 'Hello SSR!');\n\nasync function renderAndSendHtml() {\n  const modules = new Set<string>();\n\n  // In a real application, you might call Loadable.preloadAll() here\n  // await Loadable.preloadAll(); \n\n  const htmlContent = ReactDOMServer.renderToString(\n    React.createElement(Loadable.Capture, { report: moduleName => modules.add(moduleName) },\n      React.createElement(App)\n    )\n  );\n\n  // Combine manifest entrypoints with modules captured by Loadable.Capture\n  const modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)];\n  const bundles = getBundles(manifest, modulesToBeLoaded);\n\n  const styles = bundles.css || [];\n  const scripts = bundles.js || [];\n\n  // Construct the final HTML response\n  const finalHtml = `\n    <!doctype html>\n    <html lang=\"en\">\n      <head>\n        <title>My SSR App</title>\n        ${styles.map(style => `<link href=\"${process.env.PUBLIC_PATH || '/dist/'}${style.file}\" rel=\"stylesheet\" integrity=\"${style.integrity || ''}\" crossorigin=\"anonymous\" />`).join('\\n')}\n      </head>\n      <body>\n        <div id=\"app\">${htmlContent}</div>\n        ${scripts.map(script => `<script src=\"${process.env.PUBLIC_PATH || '/dist/'}${script.file}\" integrity=\"${script.integrity || ''}\" crossorigin=\"anonymous\"></script>`).join('\\n')}\n      </body>\n    </html>\n  `;\n\n  console.log(finalHtml); // In a real server, you would send this as a response\n}\n\n// Execute the SSR process\nrenderAndSendHtml().catch(console.error);\n","lang":"typescript","description":"This quickstart demonstrates the core usage of `react-loadable-ssr-addon` by configuring its Webpack plugin to generate an `assets-manifest.json` file. It then utilizes the `getBundles` function on the server to dynamically inject the correct CSS and JavaScript bundles, including code-split chunks and Subresource Integrity (SRI) hashes, into the server-rendered HTML response, ensuring all required assets are loaded for a complete SSR experience.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}