Dead-simple static prerendering for Vite, implemented correctly.
A lightweight static prerendering solution for Vite with built-in SEO meta tag support, multi-route generation, and zero runtime dependencies. It generates fully static HTML pages from your SPA at build time, making it ideal for SEO-focused Vite applications without the complexity of SSR.
- Vite-native plugin (runs during
build) - Static prerendering for multiple routes
- SEO meta tag generation (Open Graph, Twitter, JSON-LD)
- Framework-agnostic core
- Correct handling of nested routes
- Drop-in replacement with no breaking changes
- Compatible with React, Vue, Svelte, Solid, and Vanilla JS
npm install vite-plugin-prerender-staticor
pnpm add vite-plugin-prerender-staticimport { defineConfig } from "vite";
import prerenderStatic from "vite-plugin-prerender-static";
export default defineConfig({
plugins: [
prerenderStatic({
routes: [
{
path: "/",
tags: {
title: "Home",
description: "Welcome to my site",
},
},
{
path: "/about",
tags: {
title: "About",
description: "About us page",
},
},
],
render: (route) => {
return `<div id="root">Static content for ${route.path}</div>`;
},
}),
],
});{
path: "/blog",
tags: {
title: "Blog",
description: "Latest posts",
author: "Rahul Sharma",
url: "https://example.com/blog",
image: "https://example.com/og.png",
keywords: "vite, seo, prerender",
canonical: "https://example.com/blog",
robots: "index, follow",
schema: {
"@context": "https://schema.org",
"@type": "Blog"
}
}
}By default, the plugin looks for template.html in the project root.
<!DOCTYPE html>
<html lang="en">
<head>
%LINKS%
<title>%TITLE%</title>
</head>
<body>
<div id="root">%APP%</div>
</body>
</html>| Placeholder | Description |
|---|---|
%LINKS% |
Injected scripts, styles, SEO tags |
%TITLE% |
Page title |
%APP% |
Rendered HTML content |
- If
template.htmlis missing, it is automatically created - If
render()is not provided, a fallback HTML output is used - Relative asset paths are fixed automatically
- The plugin runs only during the Vite build phase
prerenderStatic({
routes: {
path: string
tags: string | SEOTagOptions
}[],
render?: (route) => string,
template?: string,
dist?: string
})This plugin is built on a framework-agnostic core:
import { generateSEOTags } from "prerender-core";The core package can be used independently in:
- Node.js scripts
- Custom static site generators
- Other build pipelines
| Tool | Supported Versions |
|---|---|
| Vite | v4 → v7 |
| Node.js | v18+ |
| Frameworks | React, Vue, Svelte, Solid |
This plugin is a good fit if:
- You need SEO support for SPAs
- You want to avoid SSR complexity
- You are deploying to static hosting
- You want full control over the generated HTML
Rahul Sharma Email: rahu8299@gmail.com GitHub: https://github.com/rahulsushilsharma
MIT © Rahul Sharma
- CLI prerender tool
- Automatic route discovery
- HTML transformation hooks
Pull requests are welcome. Please open an issue before proposing major changes.