react-server

Server component — runs on the server. Access databases and APIs directly, no client bundle cost.

export default async function Page() {
  const data = await db.query("SELECT ...");
  return <Feed items={data} />;
}

Client component — hydrates in the browser. Same React you already know.

"use client";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Worker — runs in a background thread. Offload heavy work without blocking the server or the UI.

"use worker";

export async function resize(buf) {
  return sharp(buf).resize(800).toBuffer();
}

Live component — streams updates over WebSocket. Each yield pushes a new React tree to the client.

"use live";

export default async function* Price({ symbol }) {
  while (true) {
    yield <span>{await getPrice(symbol)}</span>;
    await new Promise((r) => setTimeout(r, 1000));
  }
}

Add the framework to your project with a single dependency — React is included, no separate install needed.

pnpm add @lazarv/react-server

Write a default-exported React component. This file is your entire application entry point.

export default function App() {
  return <h1>Hello World!</h1>;
}

Start the development server with instant hot module replacement powered by Vite.

pnpm react-server ./App.jsx

export default async function Dashboard() {
  const stats = await fetch(
    "https://api.example.com/stats",
    { headers: { Authorization: `Bearer ${API_KEY}` } }
  ).then((r) => r.json());

  return (
    <section>
      <h1>Dashboard</h1>
      <p>Total users: {stats.users}</p>
      <p>Revenue: ${stats.revenue}</p>
    </section>
  );
}

async function createPost(formData) {
  "use server";

  const title = formData.get("title");
  const body = formData.get("body");

  await db.posts.create({ title, body });
  revalidate("/posts");
}

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="body" placeholder="Content" />
      <button type="submit">Publish</button>
    </form>
  );
}

"use live";

export default async function* StockPrice({ symbol }) {
  while (true) {
    const price = await getPrice(symbol);
    const trend = await getTrend(symbol);

    yield (
      <div>
        <span className="text-2xl">${price}</span>
        <span className={trend > 0 ? "green" : "red"}>
          {trend > 0 ? "▲" : "▼"} {Math.abs(trend)}%
        </span>
      </div>
    );

    await new Promise((r) => setTimeout(r, 1000));
  }
}

import { RemoteComponent }
  from "@lazarv/react-server/remote";

export default function App() {
  return (
    <main>
      <h1>Host Application</h1>

      <RemoteComponent
        src="https://team-a.example.com/header"
      />

      <RemoteComponent
        src="https://team-b.example.com/widget"
        isolate
        defer
      />
    </main>
  );
}

app/
├── layout.jsx              # Root layout
├── page.jsx                # /
├── about.jsx               # /about
├── posts/
│   ├── page.jsx            # /posts
│   ├── [id].jsx            # /posts/:id
│   └── [...slug].jsx       # /posts/*
├── (auth)/
│   └── login.jsx           # /login (grouped)
├── @sidebar/
│   └── page.jsx            # Parallel outlet
├── loading.jsx             # Suspense fallback
├── error.jsx               # Error boundary
├── (i18n).middleware.mjs   # Middleware
└── GET.api.server.mjs      # GET /api endpoint

import { useResponseCache, useCache } from "@lazarv/react-server";

Cache the full rendered response for 30 seconds — subsequent requests skip rendering entirely.

useResponseCache(30000);

Cache individual data fetches with compound keys. Each entry has its own TTL and can be invalidated independently.

const post = await useCache(
  ["posts", id],
  () => fetchPost(id),
  60000
);

Or use the "use cache" directive at the top of a file for declarative TTL and tag-based invalidation.

"use cache; ttl=60; tags=posts"

Define custom component overrides once in mdx-components.jsx — they apply globally to all your MDX content.

export function useMDXComponents() {
  return {
    h1: (props) => (
      <h1 className="text-4xl font-bold" {...props} />
    ),
    code: ({ children, className }) => (
      <SyntaxHighlighter language={className}>
        {children}
      </SyntaxHighlighter>
    ),
    a: (props) => (
      <Link className="text-blue-600" {...props} />
    ),
  };
}

A single command builds your app and generates platform-specific deployment output.

react-server build --deploy

Set the adapter in your config file — the build outputs edge functions, serverless functions, or Workers automatically.

{ "adapter": "vercel" }

Or pass the adapter directly as a CLI argument — no config file needed.

react-server build --adapter vercel --deploy