Olova

A hybrid SSG/CSR framework built on TanStack Router with Vite.

Features

- 🚀 Static Site Generation - Pre-render pages at build time with "use static" directive
- ⚡ Client-Side Routing - Full SPA experience with TanStack Router
- 📝 MDX Support - Write content in MDX with frontmatter metadata
- 🎯 Selective Hydration - Control when and how components hydrate
- 🔍 SEO Optimized - Full meta tags and HTML for search engines
- 🌊 Flight Payloads - Efficient data serialization for hydration

Installation

``bash
npm install olova
`

Usage

$3

`ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { olovaPlugin } from "olova";

export default defineConfig({
plugins: [
react(),
...olovaPlugin({
routesDir: "./src/routes",
}),
],
});
`

$3

Mark pages for static generation with the "use static" directive:

`tsx
// src/routes/about.tsx
"use static";

export default function AboutPage() {
return

About us

;
}

export const meta = {
title: "About Us",
description: "Learn more about our company",
};
`

$3

MDX files are automatically treated as static:

`mdx
---
title: Hello World
description: My first blog post
---

Hello World

This is my first blog post!
`

$3

Use the runtime exports for hydration control:

`tsx
import { HydrationBoundary, useRenderingMode } from "olova/runtime";

function InteractiveWidget() {
return (



);
}
`

Hydration Strategies

- immediate - Hydrate as soon as possible (default)
- idle - Hydrate when browser is idle
- visible - Hydrate when element is visible
- interaction - Hydrate on first user interaction

Peer Dependencies

- react >= 18
- react-dom >= 18
- vite >= 5
- @tanstack/react-router` >= 1

License

MIT