React server rendering - A Quick Guide

React server rendering - A Quick Guide

<a href="https://www.dunebook.com/react-authentication/" target="_blank">React</a>&nbsp;offers an approach to render components to strings specifically for the case of server-side rendering.

React offers an approach to render components to strings specifically for the case of server-side rendering.

That is accomplished by the react-dom package, that manages the React to Dom conversion.

However, we don’t need to simply render a view, however the correct view.

That’s where isomorphic or Universal routing comes into the picture.

Universality, sometimes called “isomorphism”, refers to ability to run nearly the same code on both client and server – a concept that was born out of the trials and tribulations in the past of creating applications on the web, availability of new technologies, and the ever-growing complexity of developing and maintaining these applications.

Why React server rendering?

A normal React application executes in the browser, rendering pages in the DOM in response to user actions. In order to improve the user experience, we want to render the pages server side and send the generated static content to the client side, this will ensure that our content is crawlable by search engines and also allow users with feature phones to consume our content.

Rendering a view

The fundamental concept is that we wrap the app in a stateless <StaticRouter>instead of a <BrowserRouter>. The primary difference between these two routersis that the location of the static router never changes, therefore helpful for our case, where we only have to compute the needed route and send the view back to the client.

let’s look at the client.js file.

// --- client.js

import React from 'react' import { render } from 'react-dom' import { BrowserRouter } from 'react-router-dom'

import App from './modules/App'

render((

), document.getElementById('app'));

In the code snippet above the client BrowserRouter stays the same and the server static router handles the incoming requests routing.

Now, let’s look at the server.js file.

// --- server.js

import path from 'path'; import React from 'react' import express from 'express' // we'll use this to render our app to an HTML string import { renderToString } from 'react-dom/server' // and these to match the url to routes and then render import { StaticRouter } from 'react-router' import App from './modules/App'

const app = express();

// serve our static stuff app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => { const context = {} const markup = renderToString(

)

res.set('content-type', 'text/html'); res.send(renderPage(html)); });

// We are using this function that renders an HTML // with markup passed as parameter function renderPage(appHtml) { return `

Isomorphic Router Example${appHtml} ` }

In the Code snippet above, we are mapping all requests through the app.get to React’s renderToString method from the react-dom package sent back to the client.

The talked about component markup shall be passed to a simple function that generates an HTML with the markup in it. And that is what Express will send back to the client.

A Real-life case in React server rendering

Suppose a user wants to navigate to a protected URL or want to access some private information. In these cases, we use it like this:

/ --- server.js

// ...

app.get('*', (req, res) => { const context = {} const markup = renderToString(

)

if (context.url) { // Somewhere a `` was rendered res.redirect(302, context.url); } else { res.set('content-type', 'text/html'); // here you can use whatever view rendering technique that you like res.send(renderPage(html)); }

});

// ...

In the Code Snippet Above, Whenever you render   on the client, the browser historychanges the state and we get a brand new screen.

In a static server environment, we are able to change the app state. Instead, we use the context prop to search out what the results of rendering was.

If we discover a context.url then we all know the app redirected. This permits us to send a correct redirect from the server. This redirect will make the router handle the following request as if nothing occurred.



Existing Eclipse User? Try CodeMix for productive React Development.


Conclusion

In this article we saw how to send the right view to the client, depending on the requested URL, even redirecting to the right URL if needed. the most common use case for server-side rendering is to handle the initial render when a user first requests our app. So,what about the initial state of the app? Yes, there is a lot more to cover in React server rendering, hopefully we will cover those in coming articles.



Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

ReactJS Development Services | ReactJS Development Company - Chapter 247 Infotech

Chapter 247 Infotech is a leading ReactJS development company in India, USA, offering ReactJS development services at par to a spectrum of business domains from E-commerce, healthcare to Edutech at

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use