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

npm install olova

Usage

Vite Configuration

// 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",
    }),
  ],
});

Static Pages

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

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

export default function AboutPage() {
  return <div>About us</div>;
}

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

MDX Pages

MDX files are automatically treated as static:

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

# Hello World

This is my first blog post!

Runtime Components

Use the runtime exports for hydration control:

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

function InteractiveWidget() {
  return (
    <HydrationBoundary strategy="visible">
      <ExpensiveComponent />
    </HydrationBoundary>
  );
}

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