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...

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

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

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

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

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 an entrypoint for your app and export your root component as default.

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

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

pnpm exec react-server ./App.tsx --open

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 --open to start your application in development mode.

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

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

To enable file-system based routing, you need to install the @lazarv/react-server-router package and you no longer need to specify and entrypoint for your app.

pnpm add @lazarv/react-server-router

Create a @lazarv/react-server configuration file in your project root to specify where the router should start processing files. By default every file are included in the routing, but you can include/exclude using arrays of glob patterns.

{
  "root": "src"
}

Move your entrypoint from ./App.tsx to ./src/page.tsx to transform it into a page.

Just start react-server without using an entrypoint.

pnpm exec react-server --open

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

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 --open
pnpm --filter ./examples/react-router --open
pnpm --filter ./examples/tanstack-router --open

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

MIT