The easiest way to build React apps with server-side rendering.

Combines the fantastic developer experience of using Vite for React development and all the new React 19 features.

And more...

Features

React Server Components

• async components
• client components with "use client";
• error boundaries
• streaming server-side rendering
• selective hydration

Server Actions

• server modules and inline server actions with "use server";
• progressive enhancement

File-system based router

• pages
• layouts
• outlets
• error boundaries
• loading fallbacks
• Markdown support
• REST API routes
• middlewares
• static export

Performance

• response caching and revalidation
• React hot module replacement using Vite
• blazing-fast production build using node.js cluster

Getting started

Install

Use a package manager to add @lazarv/react-server to your project. pnpm is a great choice to do it!

pnpm add @lazarv/react-server

Create your app

Create an entrypoint for your app and export your root component as default.

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

Run your app

Similarly how you would run a script with node, use react-server to start your app. Magic!

pnpm exec react-server ./App.tsx

Note: if you don't want to install the @lazarv/react-server package and you just want to try out something quickly, you can use npx to run the react-server CLI. This way, it's not required to install anything else if you use JavaScript. It's enough to have a .jsx file with a React Server Component exported as default to run your application. Just run npx @lazarv/react-server ./App.jsx to start your application in development mode.

Build

For production build use the build command of react-server. This will build your app both for the server and the client side. Your build will be available in the .react-server folder of your project.

pnpm exec react-server build ./App.tsx

Run in production

To start your app after a successful production build, you will need to use the start command of react-server.

pnpm exec react-server start

You can unleash cluster mode by using the REACT_SERVER_CLUSTER environment variable.

REACT_SERVER_CLUSTER=8 pnpm exec react-server start

File-system based routing

To enable file-system based routing, you just omit the entrypoint when running a @lazarv/react-server app.

Create a @lazarv/react-server configuration file in your project root to specify where the router should start processing files by using the root property. By default every file are included in the routing, but you can include/exclude using arrays of glob patterns. The following example will only include page.tsx files as pages and layout.tsx files as layouts, emulating the behavior of Next.js.

react-server.config.json

{
  "root": "app",
  "page": {
    "include": ["**/page.tsx"],
  },
  "layout": {
    "include": ["**/layout.tsx"],
  }
}

Move your entrypoint component from ./App.tsx to ./app/layout.tsx and ./app/page.tsx to transform it into a page with a layout.

Just start react-server without specifying an entrypoint.

pnpm exec react-server

Read more about file-system based routing at react-server.dev/router.

Documentation

Check out the full documentation at react-server.dev.

The documentation site was fully created using this framework and so it also functions as a static site example. To start the documentation site locally, use:

pnpm --filter ./docs dev

Examples

You can try out the existing examples in this repo by using the following commands:

git clone https://github.com/lazarv/react-server.git
cd react-server
pnpm install

And then run the example you want to check out:

pnpm --filter ./examples/todo dev --open
pnpm --filter ./examples/photos dev --open
pnpm --filter ./examples/express dev
pnpm --filter ./examples/nestjs start:dev
pnpm --filter ./examples/spa dev --open
pnpm --filter ./examples/react-router dev --open
pnpm --filter ./examples/tanstack-router dev --open
pnpm --filter ./examples/react-query dev --open
pnpm --filter ./examples/mui dev --open
pnpm --filter ./examples/mantine dev --open

You will need to have pnpm installed. Follow instructions at https://pnpm.io/installation.

License

MIT