Giters

revskill10 / react-server

Experimental React meta-framework using Vite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

What is @lazarv/react-server?

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

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
  • data loaders
  • layout breaking pages

Performance

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

Experimental features

  • Remote components using React Server Components
  • static export

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 (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>@lazarv/react-server</title>
      </head>
      <body>
        Hello World!
      </body>
    </html>
  );
}

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

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

@lazarv/react-server-router

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.

react-server.config.json

{
  "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

Documentation

Coming soon...

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

or

pnpm --filter ./examples/photos dev --open

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

License

MIT

About

Experimental React meta-framework using Vite

License:MIT License

Languages

Language:JavaScript 100.0%