React For Server Development

#react #typescript #javascript #node

As far as I know, I'm the first and only one so far to build a server app that was built completely around the "React JS" library, and in this post, I want to try and convince why you should create your next "Node JS" server using "React JS".

Why 😳

So why would a reasonable man use "React JS" a library that was built specifically for building client-side user interfaces for his server? well even though everybody is using "React JS" for UI, the truth of the matter is that "React JS" can Actually be used for any place where your goal is to build a reactive, component-based tree of data, whether it is an HTML tree or a tree of native UI elements like in "React native", you can even make games using "react-three-fiber", "React JS" really is a great fit for all of those tasks.
In the rest of this post, I want to talk about the places where I found that "React JS" can help you in the process of creating a reactive, component-based tree of data as part of building your "Node JS" server.

HTTP "REACT JS" Servers 🙃

And so when I asked myself the following question:

where can "React JS" be used for creating servers?

My first idea was HTTP servers.
since HTTP servers are usually made from a tree of HTTP routes, and since I was sure that mixing that with reactivity and reusable components can create something awesome (or at least hoped so), I decided to start working on a library for creating HTTP servers using the power of "React JS".

And in a few hours, I was done creating the first version of "@react-fullstack/server-express" a library for creating "React JS" HTTP servers that is based on "Express JS".

But..., it is about 2 months later and I'm still not really sure if "React JS" really was a great fit for HTTP servers. since HTTP servers are still usually extremely static and do not need to get updated frequently, "React JS" a library the is built around the idea of reactivity may still not be a better choice than just using something like "Express JS" on its own.

Back To The Roots - creating LAYOUT in the server using "React JS" 😎

Quick Disclaimer 😅

Before you are leaving guessing I meant server-side rendering in "React JS", I really didn't, I talking about something new, let me explain.

Server-Side Rendering - VS - Client-Side Rendering 🤺

For the last few years, people were needing to choose between two choices when building a website

Server-side rendering - a method that does not expose your business logic to the client but limits your user interaction capabilities and speed.
Client-side rendering - a method that extends your user interaction capabilities, reactivity, and speed but exposes your business logic to the client and also requires you to build a server API for the client to interact with.

But for some people and app, those two options aren't enough, for example, for me while trying to create a project of mine called "web-desktop-environment" both of those options weren't enough, I wanted all my business logic to run on the server but still needed the power, speed, and reactivity of a client-side "React JS" web app.

The solution 😎

"@react-fullstack/fullstack" is the third option, it is a "React JS" framework for building Full-Stack "React JS" applications with the speed and reactivity of a client-side application but without exposing your business logic and requiring you to build a server API like in client-side rendering.

But How 👩‍🏫

The way "@react-fullstack/fullstack" achieve its goal is a technique called "server-side execution", in server-side execution every time the user goes to your site the server creates for him a "user session", the "user session" goal is to tell the client web-app what view layout the user should see, the data the view should contain, and what client events the server what to listen to, and according to a combination of the events fired from the client to the server and the server business logic the "user session" get updated with new views and data from the backend.

What about the client 🤔

In "@react-fullstack/fullstack" all the client really is is a collection of layout views (which are basically "React JS" components) that the client support, for example, the view can support a "login screen" and a "home screen", and so the server will need to tell the client when he needs to render the "login screen" and when to render the "home screen" and lastly what data to pass (props) to them, the way the server can do that is - for example: to listen to a log-in event on the "login screen" and when such an event is fired he will tell the client to show the "home screen" with new data (component props) specific for the user that logged in.

Code Example 👨‍💻

Let's start from the server

Note: this code is an abstract version of the way you really build an application using "@react-fullstack/fullstack" if you're looking for a more true code example you can find it here

// internal query for getting posts data
import { getPosts } from "./internalServerQueries";

// "user session" App
const Session = () => {
    // state hook for user log-in state
    const [isLoggedIn, logIn] = useState(false);
    return isLoggedIn ?
                /*
                    "LoginScreen" is the view the client should render,
                    "header" is some data that got fetched from the server
                    and "onLogIn" in an event the server should listen to
                */
               <LoginScreen header={"hello! please log-in"} onLogIn={() => logIn(true)} /> :
                /*
                    "HomeScreen" is the view the client should render,
                    "posts" is some data that got fetched from the server
                    and "onLogOut" in an event the server should listen to
                */
               <HomeScreen posts={getPosts} onLogOut={() => logIn(false)} />
}
// the main server "App"
const App = () => {
    return <Server>
            {
            // on each "user session" run the Session component
                () => <Session />
            }
            </Server>
}

Final Words

Both "@react-fullstack/fullstack" and "@react-fullstack/server-express" are still in an early stage but if you are interested in trying and creating HTTP servers or Full-Stack application using the "React JS" library you can check them out here

shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are

Fullstack or npm i @react-fullstack/fullstack
express server npm i @react-fullstack/server-express

View on GitHub

Thanks for reading, if you have any questions or suggestions you can found me on Twitter or LinkedIn.

Top comments (6)

Mohamed Djelaili • Sep 28 '20

This is brilliant, Does the client views rendered on the server-side?

shmuelhizmi • Sep 28 '20

Thanks and No, the server send the client an overall structure of the layout ( tree of component ), and the client render them.
But I may implemente a way of supporting server side rendering in the future.