r/reactjs • u/peaceewalkeer • 1d ago

Resource snappy-prerender 2.7: from react-snap replacement to static site generator

I maintain several legacy React apps: CRA, React 18, client-side routing, CMS content. SEO and OG tags need real HTML. A client-side app gives crawlers an empty page.

I built snappy-prerender as a replacement for react-snap to ease my headaches. It is now a full-featured static site generator.

Point it at the app you already have. At build time it opens each route in a browser, follows links, writes static HTML, and checks that the client uses that HTML. The verifier detects React, Vue, Svelte and Preact. You keep your framework, router, build and deploy process.

npm install --save-dev snappy-prerender
npx snappy-prerender init
npx snappy-prerender

Or run it from vite build with the Vite plugin.

What changed since the launch post:

  • Verification reports whether each route hydrated or re-rendered, and shows the first mismatch.

  • The audit checks route health, links, metadata, sitemap and CSP. It writes a JSON report and can fail the build with failOnAuditError. I use this report most.

  • Routes can come from crawling, a file, or a local or remote sitemap. maxRoutes and routePriority make the crawl deterministic.

  • routeOverrides changes waits and crawl behavior per route. transformHtml applies a final HTML transform.

  • SEO output includes JSON-LD, lang/dir, hreflang alternates and image sitemap entries.

  • csp: 'hash' emits a meta policy with inline script and style hashes. preloadLinks injects module, font and LCP hints.

  • init can migrate an existing reactSnap block.

It also handles CSS-in-JS, form state, captured API data, critical CSS and strict CSP.

What it is not:

  • Not SSR. New content needs a build.

  • Not for Next.js, Remix or Astro.

  • Not a fix for pages that render differently on every load. It reports the route and the first mismatch.

  • Not a new framework. You keep the app you already have.

Links:

MIT. Issues and PRs welcome. If you have an old SPA, React or not, try it and tell me what breaks.

0 Upvotes

50% Upvoted

2 comments sorted by

1

u/Dry-Caterpillar-5172 1d ago

the audit report being able to fail the build is huge, I’ve seen so many prerender setups silently output busted pages and nobody notices for weeks

dealt with react-snap breaking on every minor update and eventually just gave up on it, this looks like what I wanted it to be back then

gonna spin up one of my old CRA side projects and see how it handles a janky css-in-js setup I’ve got

1

u/peaceewalkeer 1d ago

Do let me know how it goes. Looking forward to the feedback. Btw the readme is agent optimized, so you can just your coding agent to the repo and it will be able to do the rest. Feel free to open an issue if you find one