Mail us
Book a Meeting
Call us
Chat with us

ReactJS

React Server Components: The Future of Server Rendered UI

Name: OneClick IT Consultancy P Limited
Address: 407-412, President Plaza Opp. Titanium Square Thaltej, Ahmedabad, Gujarat, 380054, India
Telephone: +1(802) 684-0486
Price range: $$$

Need technical help?

Our experts will get back to you within 24 hours.

Introduction

React 18, the latest iteration of the popular JavaScript library to build interactive UIs is loaded with a treasure of new features and improvements. Its most prominent feature is its improved support for Server Side Rendering (SSR).

Step 1: Set Up the Server

Create a server folder in the root of the project with two files, index.js and server.js.

server/index.js

require("ignore-styles");require("@babel/register")({ignore: [/(node_modules)/],presets: ["@babel/preset-env", "@babel/preset-react"],});require("./server");

This line of code starts Babel to compile code, ignores specific files such as files in "node_modules", and starts the server by importing the "server" module. This setup is mostly applied in React server side rendering to enable the server to process and send React components to clients.

server/server.js

import express from "express";import React from "react";import ReactDOMServer from "react-dom/server";import { StaticRouter } from "react-router-dom/server";import App from "./src/App";const app = express();app.get("*", (req, res) => { const { pipe, abort } = ReactDOMServer.renderToPipeableStream( <StaticRouter location={req.url}> <App /> </StaticRouter> ); { bootstrapScripts: entryPoint, onShellReady() { res.statusCode = 200; res.setHeader("Content-Type", "text/html"); pipe(res); }, onShellError() { res.statusCode = 500; res.send("<doctype html><p>Loading...</p>"); }, }});app.listen(3002, () => { console.log("App is running on http://localhost:3002");});

The code assigns a route handler to all routes by app.get("/*", ...). It suggests that this route handler will handle any request to the server. Inside the route handle:

The entryPoint array is defined with the value main.js. This is the JavaScript file utilized in bootstrapping the client side application.
ReactDOMServer.renderToPipeableStream() accepts two arguments: a React Node to render as HTML and an optional options object with streaming options. It returns an object with two methods: pipe and abort. The pipe method writes HTML to the Node.js stream. We call pipe in onShellReady to enable streaming. In static generation and for spiders, onAllReady can be called too.
The onShellReady() is invoked after the rendering is complete and the HTML may be sent to the client. It returns status 200, sets the content type header to text/html, and sends the rendered HTML using the pipe method.
The onShellError() callback is triggered when an error occurs during rendering. It sets the response status code to 500 and sends a basic error message enclosed in an HTML <p> tag.