If you haven't heard about React Server yet, now is your chance to check it out and engage in it's newly founded community which can be found at https://state-less.cloud/community 🥳

To recap, React Server is a new framework which brings known principles from the frontend world to the backend side.
To mention a few, this means you can now use TSX functional components to write backend services reactively 😱

This means, states, hooks, effects and components are now in the palms of your hands when you write your backend business logic.

Get used to readable and easily refactorable code. Write robust services using principles proven to be applicable to very large production codebases.

The idea is to compose a collection of states into an easily consumable chunk of data paired with their operations on it and send that down to the client which renders them in user facing interface.

That's right, you can pass functions created inside your serverside component from the server to the client and invoke them just like any other function. This makes interaction with the serverside state of a component in React as easy as calling a function provided by a hook. If an operation changes the serverside state of a component it's automatically reflected in your client without further ado. It's an effortless server <-> client 2 way data binding.

Imagine this piece of serverside code which represents a button that can be clicked to increase a counter.

import { Scopes, useState, clientKey } from '@state-less/react-server';
import { ServerSideProps } from './ServerSideProps';

export const HelloWorldExample2 = (props, { key, context })  => {
  // The useState hook looks familiar?
  const [count, setState] = useState(0, {
    key: "count",
    scope: Scopes.Global,
  });

  // A simple function that can be executed from the client side.
  const increase = () => {
    setState(count + 1);
  };

  return (
    // Simply pass down props to the client side.
    <ServerSideProps
      key={clientKey(`${key}-props`, context)}
      count={count}
      increase={increase}
    />
  );
};

This is all the code it needs to run a counter service on a react server instance.

As you can see a single functional component is able to perfectly represent a backend service as component, including all it's needed states and the operations which are defined to mutate that state.

All the data transportation logic and realtime state updates are hidden inside the framework, so you don't need to worry about fetching data at all. Just use a useComponent hook inside your frontend component and it provides you all of the props the serverside component rendered for you.

Try the button at our homepage at https://state-less.cloud and explore the rest of the docs.

And if still need to be convice, read more about the whys here here.

Happy Coding 🤓🥰