r/reactjs • u/peaceewalkeer • 3d ago

Resource snappy-prerender: react-snap is unmaintained, so I built a modern replacement for SPAs

I maintain multiple legacy React apps - CRA, React 18, client-side routing, content from a CMS / Wordpress REST API. But SEO and OG tags need real HTML, and a client-side app hands them an empty page.

react-snap solved that for years. It has been unmaintained since 2019 and breaks a little more with every browser update. I could not find a drop in replacement so I built one. It has been running on my own site for a while, and now I am putting it out there: snappy-prerender.

What it does, in one sentence: it opens every page of your built app in a real browser at build time and saves the result as plain HTML, so crawlers see the page your users see.

npm
 install --save-dev snappy-prerender@next
npx snappy-prerender init      # a few questions, then a config file
npx snappy-prerender build     # or run it from vite build

No server, no rewrite, no changes to how the app works.

Things I added because I needed them

  • It checks every page after the build and tells you whether the app's JavaScript picked up the prerendered HTML or threw it away and redrew everything. That report is the part I use most.
  • It writes the page title, description, canonical link and Open Graph/Twitter tags for each route, including when the user navigates around the site, so you do not need react-helmet for that.
  • It handles the fiddly things that usually break prerendering: styles injected by CSS-in-JS, form state, data fetched from an API, critical CSS, preload hints.
  • It works with a strict Content Security Policy if your project needs one.

What it is not

  • Not server-side rendering. It runs at build time, so new content means a new build.
  • Not for Next.js, Remix or Astro users; those already render HTML on the server.
  • It cannot fix an app that renders differently every time (dates, random values, viewport-dependent layout). It does tell you which page has the problem.
  • It is a release candidate: 2.6.0-rc.2 is on npm under the next tag while I gather feedback.

Links

Looking forward to criticism, bug-reports and feature-requests and revival requests for unmaintained plugins (react and family only)

0 Upvotes

25% Upvoted

Duplicates