An experimental React meta-framework using Vite. It's a playground project to try out all the new React features available in the experimental versions of React.
Combines the fantastic developer experience of using Vite for React development and all the new React features presented by Next.js 13.
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
- data loaders
- layout breaking pages
- response caching and revalidation
- React hot module replacement using Vite
- blazing-fast production build using node.js cluster
- Remote components using React Server Components
- static export
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 (
<html lang="en">
<head>
<meta charSet="utf-8" />
<title>@lazarv/react-server</title>
</head>
<body>
Hello World!
</body>
</html>
);
}
Similarly how you would run a script with node
, use react-server
to start your app. Magic!
pnpm exec react-server ./App.tsx --open
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
Coming soon...
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
or
pnpm --filter ./examples/photos dev --open
You will need to have pnpm
installed. Follow instructions at https://pnpm.io/installation.