npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lazarv/react-server

v0.0.0-experimental-2004bed-20241219-0d8e8705

Published

The easiest way to build React apps with server-side rendering

Downloads

615

Readme

@lazarv/react-server

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

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

Server Actions

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

File-system based router

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

Performance

  • [x] response caching and revalidation
  • [x] React hot module replacement using Vite
  • [x] 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 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 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.

License

MIT