{"id":15793,"library":"react-snap","title":"Zero-Configuration Static Prerendering for SPAs","description":"react-snap is a zero-configuration, framework-agnostic static prerendering tool designed to convert Single Page Applications (SPAs) into static HTML. It leverages Headless Chrome (powered by Puppeteer) to crawl all navigable links from a given root, effectively generating static HTML files. This process significantly enhances SEO and initial page load performance by delivering pre-rendered content to the browser before JavaScript execution. The package is currently at version 1.23.0 and appears to be in a maintenance phase rather than active feature development, with its last major release dating back to early 2020. A key differentiator is its out-of-the-box compatibility with tools like Create React App and its ability to handle modern browser features without issue, as it uses a real browser for rendering. It primarily operates as a `postbuild` script, integrating into existing build workflows without requiring direct programmatic imports into the application's source code.","status":"maintenance","version":"1.23.0","language":"javascript","source_language":"en","source_url":"https://github.com/stereobooster/react-snap","tags":["javascript"],"install":[{"cmd":"npm install react-snap","lang":"bash","label":"npm"},{"cmd":"yarn add react-snap","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-snap","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[],"quickstart":{"code":"yarn add --dev react-snap\n\n// package.json\n// ...\n// \"scripts\": {\n//   \"build\": \"react-scripts build\",\n//   \"postbuild\": \"react-snap\"\n// }\n// ...\n\n// src/index.js (for React 16+)\nimport { hydrate, render } from \"react-dom\";\nimport App from \"./App\"; // Assuming your main App component\n\nconst rootElement = document.getElementById(\"root\");\nif (rootElement.hasChildNodes()) {\n  hydrate(<App />, rootElement);\n} else {\n  render(<App />, rootElement);\n}\n","lang":"javascript","description":"Demonstrates how to integrate react-snap into a Create React App project by adding it as a dev dependency, configuring a post-build script, and updating the React root rendering logic for proper hydration."},"warnings":[{"fix":"Configure your application's router to use HTML5 history mode (e.g., `BrowserRouter` in React Router, `history` mode in Vue Router).","message":"react-snap only supports routing strategies that utilize the HTML5 history API. It does not work with hash-based URLs (e.g., `/#/path`). Ensure your router is configured for history mode.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Implement a `window.snapSaveState` callback to manually add the `data-server-rendered=\"true\"` attribute to your root Vue element, e.g., `window.snapSaveState = () => { document.querySelector(\"#app\").setAttribute(\"data-server-rendered\", \"true\"); };`","message":"When using Vue.js, rehydration can cause a flash due to the `data-server-rendered` attribute not being present on react-snap's output. A hack involving `window.snapSaveState` is often required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully test `minifyHtml` configurations. If issues arise, consider setting `collapseWhitespace: false` and `removeComments: false` in your `reactSnap` configuration in `package.json`.","message":"Custom `minifyHtml` options, particularly `collapseWhitespace` and `removeComments`, can sometimes lead to unexpected rendering issues or broken HTML, especially with frameworks like Vue.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.23.0':81 '2020':104 'abil':124 'activ':92 'agnost':18 'app':121 'appear':83 'applic':27,159 'back':101 'box':114 'browser':71,128,137 'build':150 'chrome':35 'code':162 'compat':115 'configur':3,15 'content':68 'convert':24 'crawl':40 'creat':119 'current':78 'date':100 'deliv':64 'design':22 'develop':94 'differenti':107 'direct':154 'earli':103 'effect':48 'enhanc':56 'execut':74 'exist':149 'featur':93,129 'file':52 'framework':17 'framework-agnost':16 'generat':49 'given':46 'handl':126 'headless':34 'html':31,51 'import':156 'initi':59 'integr':147 'issu':131 'javascript':73,163 'key':106 'last':97 'leverag':33 'like':118 'link':43 'load':61 'mainten':88 'major':98 'modern':127 'navig':42 'oper':142 'out-of-the-box':110 'packag':76 'page':26,60 'perform':62 'phase':89 'postbuild':145 'power':36 'pre':66 'pre-rend':65 'prerend':5,20 'primarili':141 'process':54 'programmat':155 'puppet':38 'rather':90 'react':9,120 'react-snap':8 'real':136 'releas':99 'render':67,139 'requir':153 'root':47 'script':146 'seo':57 'signific':55 'singl':25 'snap':10 'sourc':161 'spas':7,28 'static':4,19,30,50 'tool':21,117 'use':134 'version':80 'without':130,152 'workflow':151 'zero':2,14 'zero-configur':1,13","created_at":"2026-04-21T18:00:02.121227+00:00","updated_at":"2026-04-21T18:00:02.121227+00:00","problems":[{"fix":"Modify your application's router to use HTML5 history mode (e.g., `BrowserRouter` for React, `mode: 'history'` for Vue Router).","cause":"react-snap exclusively supports HTML5 history API for client-side routing, not hash-based routing.","error":"Prerendering fails or results in blank pages when using hash-based URLs."},{"fix":"Add a `window.snapSaveState` callback in your application to manually set `document.querySelector('#app').setAttribute('data-server-rendered', 'true');`","cause":"Vue expects a `data-server-rendered` attribute on the root element for proper rehydration, which react-snap does not automatically add.","error":"Vue application rehydrates with a flash or renders incorrect initial state after prerendering."},{"fix":"Adjust `minifyHtml` options in your `package.json` under the `reactSnap` key. Try disabling `collapseWhitespace` and `removeComments` if you encounter issues.","cause":"Aggressive `minifyHtml` settings (e.g., `collapseWhitespace` or `removeComments`) can inadvertently alter the DOM structure or remove critical elements.","error":"Generated HTML files appear broken, have incorrect spacing, or missing comments."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"react-snap","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/stereobooster/react-snap","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-snap","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-04-21","next_check":"2026-07-20","install_tag":null}}