❌

Reading view

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.

submitted by /u/peaceewalkeer to r/reactjs
[link] [comments]
  •  
❌