How I Added Pre-Rendering to a Vite Multi-Page App Without SSR

I run RelahConvert, an online file conversion site with 50+ tools across 25 languages. Last week I noticed a problem in my Ahrefs audit: every single one of my 1,449 pages was flagged as "H1 missing" and "Low word count."
The pages weren't empty. They had H1s, descriptions, FAQs — all rendering correctly when you visited them. But here's what crawlers were seeing:

Yep. Empty.

The Setup

The site is a Vite MPA (multi-page app), not a SPA. Each tool has its own .html file. Tool-specific JavaScript injects the page content at runtime via document.querySelector('#app').innerHTML = template.
This works great for users. The page loads, JS runs, content appears. Fast and clean.
But it breaks for crawlers that don't execute JavaScript (Ahrefs, basic bots, social media scrapers like Facebook and X). They see an empty body. Even Google, which does run JS, has a delayed second-pass rendering that costs crawl budget and makes new pages slow to index.
The Usual Solutions Didn't Fit
The standard fixes for this problem:

Server-Side Rendering (SSR) — requires a runtime backend. I'm on Cloudflare Pages (static hosting). Not happening.
Static Site Generation (SSG) — would mean restructuring around a framework like Astro or Vike. Massive refactor for a site already shipping.
Pre-rendering with Puppeteer — spinning up a headless browser for every route during build. ~3-5 minute build time hit for 1,449 pages, plus heavy dependencies.

I wanted something lighter: just inject the SEO-relevant content (H1, description, FAQs) into the static HTML at build time, without re-implementing my entire UI in Node.
The Approach: Hybrid Pre-Render via Vite Plugin
I extended the existing build plugin to read my i18n dictionaries and write the SEO content directly into each HTML file. The interactive tool UI (drag-drop, canvas operations, conversion logic) stays JS-rendered — only the content that matters for crawlers gets baked in.
Rough shape of the plugin:

function preRenderPlugin() {
  return {
    name: 'pre-render-seo',
    apply: 'build',
    closeBundle() {
      const tools = ['compress', 'resize', 'merge-pdf', ...]
      const langs = ['en', 'fr', 'es', 'de', 'ar', ...]

      for (const tool of tools) {
        for (const lang of langs) {
          const i18n = loadI18n(lang)
          const seo = i18n.seo[tool]

          const html = readHTML(`dist/${lang}/${slugFor(tool, lang)}/index.html`)
          const injected = injectSEOContent(html, {
            h1: i18n.nav_short[tool],
            description: i18n.heroDesc,
            body: seo.body,
            faqs: seo.faqs,
          })

          writeHTML(path, injected)
        }
      }
    }

The content gets injected into the

placeholder. When JS runs at runtime, it replaces the contents with the interactive UI — but the pre-rendered version is what crawlers see.

Three Gotchas

1. Per-language metadata. My tool pages had hardcoded English

2. FOUC on per-language URLs. Initially I derived per-language URLs from the homepage template. JS at runtime detected the route and wiped the body to inject the tool. Result: brief flash of French content, then disappearance, then return. Fixed by switching per-language URLs to use the tool's own template as the base.

3. Cloudflare bot protection blocking social scrapers. Unrelated discovery — after fixing the OG tags, Facebook's Sharing Debugger returned 403. Cloudflare's Browser Integrity Check was challenging the Facebook scraper. The fix was a Cloudflare dashboard config, not code.

Result

Build time went from 22.7s to ~23s. Negligible. Every tool page now ships with proper H1, description, FAQs, and internal links in the static HTML across all 25 languages. Social previews work. Ahrefs and Google can read content on first crawl.

You can see the live result on the image compressor — view-source on the page shows the pre-rendered content.

The takeaway: if you're on Vite without a framework and need crawler-friendly HTML without going full SSG, a build-time plugin that injects SEO content into your existing structure is a surprisingly clean middle ground.