feat: add pre-rendering for SEO with Puppeteer

raifdmueller · claude · raifdmueller · commit 60284f804fea · 2026-02-15T09:48:59.000+01:00
Added build-time pre-rendering to generate static HTML snapshots
for search engine indexing.

Implementation:
- scripts/prerender.js — Puppeteer-based renderer
- Starts local server (serve-handler on port 8765)
- Waits for React hydration
- Captures fully rendered HTML
- Replaces &lt;body&gt; in dist/index.html

Build process updated:
- npm run build now executes: vite build &amp;&amp; node scripts/prerender.js

Benefits:
- Search engines immediately see full content (no JS execution needed)
- Faster initial indexing by Google/Bing
- Better crawl budget efficiency
- Fallback for bots without JS support

Dependencies added:
- puppeteer@^24.37.3
- serve-handler@^6.1.6

Co-Authored-By: Claude Sonnet 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && node scripts/prerender.js",
     "preview": "vite preview",
     "docs": "asciidoctor -a icons=font -a source-highlighter=highlight.js -a linkcss -a stylesheet=asciidoctor.css -D dist/docs docs/risk-radar.adoc docs/risk-radar-en.adoc",
     "prepare": "husky"
@@ -26,6 +26,8 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.8.1",
+    "puppeteer": "^24.37.3",
+    "serve-handler": "^6.1.6",
     "vite": "^6.0.0"
   },
   "lint-staged": {
diff --git a/scripts/prerender.js b/scripts/prerender.js
@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+/* global process */
+import puppeteer from "puppeteer";
+import { readFileSync, writeFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { createServer } from "http";
+import handler from "serve-handler";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distPath = join(__dirname, "../dist");
+const distIndexPath = join(distPath, "index.html");
+
+async function prerender() {
+  console.log("🚀 Starting prerender...");
+
+  // Read the built index.html
+  const originalHtml = readFileSync(distIndexPath, "utf-8");
+
+  // Start a local server for dist/
+  const server = createServer((req, res) => {
+    return handler(req, res, { public: distPath });
+  });
+
+  await new Promise((resolve) => {
+    server.listen(8765, () => {
+      console.log("📡 Local server started on http://localhost:8765");
+      resolve();
+    });
+  });
+
+  // Launch headless browser
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  });
+
+  const page = await browser.newPage();
+
+  // Navigate to local server
+  await page.goto("http://localhost:8765", {
+    waitUntil: "networkidle0",
+    timeout: 30000,
+  });
+
+  // Wait for React to render
+  await page.waitForSelector("#root > *", { timeout: 10000 });
+
+  // Give React a moment to fully hydrate
+  await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 1000)));
+
+  // Get the rendered HTML
+  const renderedHtml = await page.content();
+
+  await browser.close();
+  server.close();
+
+  // Extract only the <body> content from rendered page
+  const bodyMatch = renderedHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  if (!bodyMatch) {
+    throw new Error("Could not extract body content from rendered page");
+  }
+  const renderedBody = bodyMatch[1];
+
+  // Replace the original body content with rendered content
+  const prerenderedHtml = originalHtml.replace(/<body[^>]*>[\s\S]*<\/body>/i, `<body>${renderedBody}</body>`);
+
+  // Write back to dist/index.html
+  writeFileSync(distIndexPath, prerenderedHtml, "utf-8");
+
+  console.log("✅ Prerendering complete. Updated dist/index.html");
+}
+
+prerender().catch((err) => {
+  console.error("❌ Prerendering failed:", err);
+  process.exit(1);
+});
