Waku Has a Free Minimal React Framework — Here's How to Use It

Next.js is powerful but heavy. Remix has opinions about data loading. Waku strips React Server Components down to their essence — a minimal framework for small-to-medium projects.

What Is Waku?

Waku is the minimal React framework. It supports React Server Components (RSC) without the complexity of larger frameworks. Think of it as "RSC without the overhead."

Quick Start

npm create waku@latest my-app
cd my-app && npm run dev

// src/pages/index.tsx — Server Component by default
import { getArticles } from '../lib/db';

export default async function HomePage() {
  const articles = await getArticles(); // Runs on server

  return (
    <main>
      <h1>My Blog</h1>
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

Why Waku Over Next.js

	Waku	Next.js
Bundle size	Minimal	Large
Config complexity	Near zero	Extensive
Build time	Fast	Varies
Learning curve	Small	Steep
RSC support	Core focus	One of many features
Best for	Small-medium apps	Enterprise apps

Server Components + Client Components

// Server Component (default) — no 'use client' needed
export default async function ProductPage({ id }) {
  const product = await db.query('SELECT * FROM products WHERE id = ?', [id]);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={id} /> {/* Client component */}
    </div>
  );
}

// src/components/AddToCartButton.tsx
'use client';

import { useState } from 'react';

export function AddToCartButton({ productId }) {
  const [added, setAdded] = useState(false);

  return (
    <button onClick={() => { addToCart(productId); setAdded(true); }}>
      {added ? '✓ Added' : 'Add to Cart'}
    </button>
  );
}

File-Based Routing

src/
  pages/
    index.tsx        → /
    about.tsx        → /about
    blog/
      index.tsx      → /blog
      [slug].tsx     → /blog/:slug
    _layout.tsx      → Shared layout

Key Features

• React Server Components — first-class support
• File-based routing — intuitive page structure
• Zero config — works out of the box
• Vite-powered — fast HMR and builds
• Static + Server rendering — choose per page
• Middleware support — request/response processing

Deployment

Deploy anywhere that runs Node.js:

npm run build
npm run start

# Or deploy to Vercel, Netlify, Cloudflare

Get Started

• Documentation
• GitHub — 5K+ stars
• Examples

---

Need data for your React app? My Apify scrapers deliver structured data via API — perfect for Server Components. Custom solutions: [e-mail]