Solving the React SPA SEO Problem Without Next.js Overhead
Standard Vite React Single Page Applications are loved by developers for their blazing-fast Hot Module Replacement (HMR). But out of the box, they output a single index.html containing an empty root div.
For public-facing business websites, this presents major SEO challenges:
Social platforms like WhatsApp, LinkedIn, and Twitter cannot parse OpenGraph images or descriptions generated purely via client-side JavaScript.
Googlebot must queue the page for two-stage rendering, delaying indexation of fresh content.
The Solution: Build-Time Static Pre-Rendering (SSG)
At Korvith, we architected a lightweight pre-rendering pipeline in prerender.mjs that runs immediately after vite build.
1Extract Canonical Routes from Sitemap: The script parses all URLs from
public/sitemap.xml.2Server-Side Render in Node Memory: Using Vite's
createServer({ appType: 'custom' }) and React 19's renderToString, it renders each route into static HTML.3Inject Meta & Schema Markup: Our custom SEO plugin captures titles, meta tags, and JSON-LD schemas and stamps them directly into the pre-rendered HTML file.
4Output Static Directory Structure: Writes out
dist/<route>/index.html.The result? The developer velocity of standard React + Vite with 100% of the SEO benefits of Static Site Generation, running effortlessly on low-cost static hosting.