Rari

Runtime Accelerated Rendering Infrastructure

Rari is a high-performance React Server Components framework powered by a Rust runtime. Built for performance, scalability, and developer experience.

With proper app router support, true server-side rendering, and correct RSC semantics, Rari delivers 12x faster P99 latency and 10.5x higher throughput than Next.js.

Features

• App Router - File-based routing with layouts, loading states, and error boundaries
• True Server-Side Rendering - Pre-rendered HTML with instant hydration
• React Server Components - Server components by default, client components when you need them
• Rust-powered runtime - Persistent runtime for maximum performance
• Zero-config setup - Works out of the box with pre-built binaries
• Hot module reloading - Instant feedback during development
• Universal NPM package support - Use any npm package seamlessly
• TypeScript-first - Full type safety across server/client boundary
• Cross-platform - Supports macOS, Linux, and Windows
• Streaming SSR - Progressive rendering with Suspense boundaries
• Loading States - Automatic loading skeletons during navigation

Quick Start

Create a new Rari application in seconds:

npm create rari-app@latest my-app
cd my-app
npm run dev

That's it! Your app will be running at http://localhost:5173.

Installation

Option 1: Use create-rari-app (Recommended)

npm create rari-app@latest my-app
# or
pnpm create rari-app my-app
# or
yarn create rari-app my-app

Option 2: Add to existing project

npm install rari
# or
pnpm add rari

The Rari binary is automatically downloaded and configured during installation. No additional setup required!

Documentation

• Getting Started
• Contributing

Why Rari?

Performance That Matters

• 3.8x faster response times - 0.69ms vs 2.58ms average response
• 10.5x higher throughput - 20,226 req/sec vs 1,934 req/sec under load
• 12x faster P99 latency - 4ms vs 48ms under concurrent load
• 68% smaller bundles - 27.6 KB vs 85.9 KB client JavaScript
• 5.6x faster builds - 1.64s vs 9.11s production builds

Developer Experience

• App Router - File-based routing with automatic code splitting
• Zero configuration - Create projects instantly with create-rari-app
• Hot module reloading - See changes instantly during development
• Full TypeScript support - Complete type safety across server/client boundary
• Correct RSC semantics - Server components by default, 'use client' for interactivity
• Cross-platform - Works on macOS, Linux, and Windows

Performance

Rari delivers exceptional performance that significantly outperforms traditional React frameworks:

Head-to-Head Comparison vs Next.js

Response Time (Single Request):

Throughput Under Load (50 concurrent connections, 30s):

Build Performance:

All benchmarks are reproducible. See benchmarks/ for methodology and scripts.

Project Structure

my-rari-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx        # Root layout (server component)
│   │   ├── page.tsx          # Home page (server component)
│   │   ├── about/
│   │   │   └── page.tsx      # About page
│   │   └── blog/
│   │       ├── page.tsx      # Blog index
│   │       └── [slug]/
│   │           └── page.tsx  # Dynamic blog post route
│   ├── components/
│   │   └── Counter.tsx       # Client components ('use client')
│   ├── actions/
│   │   └── todo-actions.ts   # Server actions ('use server')
│   └── app/
│       └── globals.css       # Global styles
├── vite.config.ts            # Vite + Rari configuration
└── package.json

Examples

App Router Layout

// src/app/layout.tsx - Server component by default
import type { LayoutProps } from 'rari/client'

export default function RootLayout({ children }: LayoutProps) {
  return (
    <div className="min-h-screen">
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <main>{children}</main>
    </div>
  )
}

export const metadata = {
  title: 'My Rari App',
  description: 'Built with Rari',
}

Server Component (Default)

// src/app/page.tsx - Runs on the server, no directive needed
import type { PageProps } from 'rari/client'

export default async function HomePage({ params, searchParams }: PageProps) {
  const data = await fetch('https://api.example.com/data').then(r => r.json())

  return (
    <div>
      <h1>{data.title}</h1>
      <Counter initialValue={data.count} />
    </div>
  )
}

export const metadata = {
  title: 'Home | My App',
  description: 'Welcome to my app',
}

Dynamic Routes

// src/app/blog/[slug]/page.tsx - Dynamic route with params
import type { PageProps } from 'rari/client'

export default function BlogPostPage({ params }: PageProps<{ slug: string }>) {
  return (
    <article>
      <h1>
        Blog Post:
        {params.slug}
      </h1>
    </article>
  )
}

export async function generateMetadata({ params }: PageProps<{ slug: string }>) {
  return {
    title: `${params.slug} | Blog`,
    description: `Read about ${params.slug}`,
  }
}

Client Component

// src/components/Counter.tsx - Interactive component
'use client'

import { useState } from 'react'

export default function Counter({ initialValue }: { initialValue: number }) {
  const [count, setCount] = useState(initialValue)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

Server Actions

// src/actions/todo-actions.ts - Server functions for mutations
'use server'

export async function addTodo(formData: FormData) {
  const title = formData.get('title') as string
  await db.todos.create({ title })
  return { success: true }
}

export async function deleteTodo(id: string) {
  await db.todos.delete(id)
  return { success: true }
}

Using Server Actions in Client Components

// src/components/TodoForm.tsx
'use client'

import { useActionState } from 'react'
import { addTodo } from '../actions/todo-actions'

export default function TodoForm() {
  const [state, formAction, isPending] = useActionState(addTodo, null)

  return (
    <form action={formAction}>
      <input name="title" required />
      <button disabled={isPending}>
        {isPending ? 'Adding...' : 'Add Todo'}
      </button>
    </form>
  )
}

Configuration

Rari works with zero configuration, but you can customize it:

// vite.config.ts
import { rari, rariRouter } from 'rari/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    rari(), // Core Rari plugin
    rariRouter() // App router support
  ]
})

Commands

Development

npm run dev

Production

npm run build
npm start

Environment Variables

• PORT - Server port (default: 3000)
• NODE_ENV - Environment mode (development/production)
• RUST_LOG - Rust logging level (default: info)

Development

Prerequisites

• Node.js 20+
• Rust (for core development)
• pnpm (recommended)

Building from Source

git clone https://github.com/rari-build/rari.git
cd rari
pnpm install
pnpm build

Running Examples

cd examples/basic-vite-rsc
pnpm install
pnpm dev

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.