What is  Server Side Rendering?

Server Side Rendering means rendering the initial view from server side later on everything will be done by the client side. In, this blog we will try to implement SSR in React js and does not include redux implementation as well.


The advantage of SSR over CSR?

 

Improved Initial Rendering Time

  • CSR:  Generally Web applications server send an Empty HTML file to the client on request. so what does client do then?
    – Parse HTML
    – Download scripts and links. (Downloading js and CSS libraries)
    – React js Populates the Component View.
  • SSR:  Server Runs React Components at server side and sends to Client.  so what does client do then?
    – Parse HTML
    – Download scripts and links.
    – React js Populates the Component View.    Already populated.

 

Consistent SEO Performance

We all know, the Search engine does not support Javascript code. All the data analysis is based on markup which has rendered. You are sending empty HMTL, the probability to get searched become a blur. SSR helps us here. In SSR component has run on the server and then It is sent to the browser. Hence, No more empty Markup. We have some static data initially.


Better User Experience

As discussed how SSR works, This gives us better User Experience.

 

CODING TIME:

1. Create Server and serve HTML

var express =  require("express");


const app = express();

app.use(express.static("public"));

app.get("*", (req, res) => {
  res.send(`
      <!DOCTYPE html>
      <head>
        <title>Cronj Tutorials</title>
      </head>
      <body>
        <div>Here I am from serve</div>
      </body>
    </html>
  `);
});

app.listen(process.env.PORT || 3000, () => {
  console.log("Server is listening");
});

 

This is the simple example of how we create the server using Node js and serve static HTML. Now we have to send Rendered react js component from the server.

2. Create a Server and serve compiled React component from server

  • Clone Repository: https://github.com/cronj-tutorials/SSR-reactjs
  • Steps to run Project:
    – Clone repository
    – npm install
    – npm run start-dev
    – localhost://3001

Clone the repository you will find server/index.js as,

import express from "express";
import React from "react"; import { renderToString } from "react-dom/server"; import App from "../shared/App"; const app = express(); app.use(express.static("public")); app.get("*", (req, res) => { res.send(` <!DOCTYPE html> <head> <title>Universal Reacl</title> <link rel="stylesheet" href="/css/main.css"> <script src="/bundle.js" defer></script> </head> <body> <div id="root">${renderToString(<App />)} </div> </body> </html> `); }); app.listen(process.env.PORT || 3001, () => { console.log("Server is listening"); });

 

If you have observed we are using importing react and renderToString on the server side.

  • React – We are pretty much comfortable using react npm module to create the reusable component.
  • renderToString- it is used to run your React component on the server.

Looking for React JS Development Services? Hire our dedicated developers!