Skip to content
effective-rsc

React Server Components · Effect · Bun

React owns the UI.
Effect owns the runtime.

A small, opinionated framework that brings Effect’s services, concurrency, and resource management to React Server Components.

Get started View on GitHub
Create an application
bunx create-ersc-app my-app

Experimental. Built on React Canary and Effect v4. Browser support and navigation

Start with the familiar

An application.
Not a new language.

Plain TypeScript, React, and Effect. Create an identity, define your pages, and compose your routes.

Explore this example
src/application.tsx
import { Effect } from 'effect';
import { Application } from 'effective-rsc';

const ERSC = Application.ersc();

const RootLayout = ERSC.Layout.make({
  render: ({ children }) =>
    Effect.succeed(
      <html lang='en'>
        <body>{children}</body>
      </html>,
    ),
});

const HomePage = ERSC.Page.make({
  render: () => Effect.succeed(<h1>Hello from effective-rsc</h1>),
});

export default ERSC.make({
  routes: ERSC.Routes.make({ layout: RootLayout }).page('/', HomePage),
});
01

One application runtime

Declare your services once. Pages, components, and Server Functions use the same Effect runtime, with explicit dependencies and scoped resources.

Read the guide
02

Native React, end to end

Render Server Components, stream with Suspense, and submit native forms. React owns the UI and its protocols.

Read the guide
03

Routes you can read

Compose pages, layouts, and middleware in TypeScript. The route graph is explicit, with no hidden filename conventions.

Read the guide