snapshotify

snapshotify renders a create-react-app app with a headless browser and saves a static HTML snapshot, trimming CSS, preloading fonts and scripts, so the first paint stops waiting on JavaScript.

A create-react-app app ships as a pile of JavaScript, and the first paint waits for it. snapshotify attacks that. It generates a static HTML snapshot of the built app, aiming for blazing fast load times and better SEO, at least for crawlers that do not run JS. The README is upfront that the module is a work in progress, with production features still missing, and it takes inspiration from react-snapshot and react-snap.

The build runs in a few stages. A temporary express server serves the built app, puppeteer drives a headless browser to render it, and postcss pulls out only the CSS the page actually needs, keeping @font-face rules, pseudo selectors like ::before and :hover, and media queries for on page nodes while dropping the rest. The minimal CSS is minified with CSSO and inlined as a style tag. Fonts for the first render get identified and preloaded, external scripts and stylesheets are deferred, code split chunks are preloaded in parallel, and an inline loader injects the main script after page load, with a fallback for browsers without JS. A CSP meta tag gets hashes added so the inline pieces are allowed. The whole HTML is minified, links are crawled recursively for client side routes, and the files land in the build folder.

Configuration comes through a JSON file, snapshot.json by default, or whatever you pass with --config. inlineCSS, preloadScripts, and preloadFonts default to true and control the main optimisations. addCSPHashes and cspAlgo manage Content Security Policy, and two flags help debugging: a dry run that writes nothing and just reports, and one that prints console logs from puppeteer.

A global window.SNAPSHOT flag is set to true while a snapshot runs, so the app can serve different content if needed. The README notes the module works well with CSS in JS libraries, having tried glamor, and that async components loaded through dynamic import are handled automatically.

The TODO list names the gaps. Routes that cannot be crawled, like content behind a login form, are a v1 blocker, with a plan to at least load index.html correctly on the first request. Flicker from async components and getting along with ServiceWorkers are still open questions.

snapshotify is an in progress tool that turns a create-react-app build into a fast loading static snapshot by inlining critical CSS and preloading scripts and fonts. Routes behind a login are still unfinished.

• Source 1 · Project repository
• Source 2 · README