Jopi Rewrite: Server-Side React using the Page Router

What will we cover?

Here we'll see how to run React.js on the server (React SSR) using Jopi Rewrite, a server framework for Node.js and Bun.js that brings powerful React.js-related features.

In this tutorial we'll focus on a feature called the "page router" which maps the structure of our website to a hierarchy of folders and subfolders corresponding to our URLs.

As you'll see, to add a new page to our site and wire it to a URL, you only need to create a subfolder whose name matches the URL and an index.page.tsx file.

What will we build?

By the end of this short (about 5 minutes) tutorial, we'll have a complete website with an authentication page and user accounts. The site will be written entirely in React.js, while remaining fully compatible with Google indexing — which is the purpose of React SSR.

What is React SSR?

React SSR is the ability to run React.js on the server to generate HTML pages that are indexable by search engines like Google. It works in two steps: the server generates the HTML pages, and once loaded in the browser the HTML is replaced by the real React.js component which becomes fully interactive. It's like a movie set suddenly turning into a real place!

There are two main benefits:

• Allow Google to index a site built with React.js
• Provide faster page loads where the user doesn't perceive the switch between the server-generated page and the identical page recreated with fully functional React components

What is Jopi Rewrite?

Jopi Rewrite is a easy to use server framework for Node.js and Bun.js. It has a low-level API for powerful things. And a high-level API, called "by intent," for easily creating a website and activating features.

Prerequisites

What we'll do works with both Node.js and Bun.js. Here we'll use Node.js. A recent version must be installed (v22.19 minimum) because the Jopi Rewrite framework uses recent platform features.

Creating the project

The first step is to create the project. We'll use a project template which is installed automatically using a command-line tool called jopi.

Command to run in the terminal

npx jopi create react-ssr-router

After running this command, files are created in the current folder corresponding to the new project.

The template used here corresponds to a website that uses React.js and the page Router feature.

Project folder contents

|- package.json     <- our project file
|- tsconfig.json    <- for TypeScript
|- src/
   |- index.tsx     <- our app entry point
   |- myUsers.json  <- contains the users login/password
   |- reactPages    <- our website pages

The reactPages folder

The reactPages folder is the most important one, as it contains the pages of our website. The folder structure maps to URLs, where each folder corresponds to a part of the URL.

Excerpt of the reactPages folder

|- index.page.tsx       <- for url http://127.0.0.1:3000
|- products/            
    |- index.page.tsx   <- for url http://127.0.0.1:3000/products/
|- login/ 
    |- index.page.tsx   <- for url http://127.0.0.1:3000/login

Adding a user page

To add a page — for example http://127.0.0.1:3000/user — simply create the index.page.tsx file in the reactPages/user folder.

The content is a simple React.js component:

export default function() {
    return <div>
        <div>I'm a React.js page!</div>
        <input type="button" value="Click me!"
               className="text-red-500"
               onClick={()=>alert("Clicked!")} />
    </div>
}

If you start the server and go to http://127.0.0.1:3000/user you will see this component.

If you disable JavaScript in the browser, the visual display will not change.
However, the button won't react and no alert message will appear.

npm install
npm run build
npm run start

You can also enable automatic recompilation to transform TypeScript into JavaScript automatically with npm run watch.

Setting the page title

Let's now modify this page to add a title and display the user's name which is currently connected (see page /login). This title is the one shown in the browser's title bar.

import {usePageTitle, useUserInfos} from "jopi-rewrite-ui";
import {Link} from "react-router";

export default function() {
    const infos = useUserInfos();
    usePageTitle("My page title");

    return <div>
        <div>Connected user is: {infos?.fullName}</div>
        <Link to="/login">Go to login page</Link>
    </div>
}

React Router is enabled internally on both the browser and server, so you can use the Link component.
More info: doc for Link

It's all for this tutorial!

The goal here was to get an overview of the page router and how to add pages, which is what we did. This tutorial doesn't go into much more detail, but if you look at the sample project we've installed here, you'll see some very interesting things like the ability to respond to a POST request.

Interesting points

Tailwind CSS

Jopi Rewrite automatically enables and configures Tailwind CSS. That's what was used in the example here with the text-red-500 class.

Useful link: Tailwind CSS website

React Router

Jopi Rewrite uses React Router internally for the browser side, while the server side is configured to allow using the Link component on the server.

Useful link: React Router website

Enable automatic refresh

Jopi Rewrite has a feature that automatically refreshes the browser when you modify one of the pages. This is especially convenient when you're testing visual changes.

To enable this feature run npx run start-dev.

With Bun.js the refresh happens very quickly because there is no TypeScript compilation step.
What takes about 2 seconds with Node.js is instantaneous with Bun.js, which is preferable for building the visual parts of a site during development.

npx run start-bun-dev

Jopin tool website: link

Useful links

Jopi Rewrite website
Jopin tool website
React Router website
Tailwind CSS website