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