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 usenpx
to run thereact-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 runnpx @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.