Complete Understanding of Server-Side Rendering for ReactJs

A couple of years ago I was working on a SPA that was developed on Reactjs but in the end, we are facing an SEO issue in the website. Shared links are not showing preview pages are not getting ranked. So finally we moved web into the SSR.

So by this blog, I will try to explain what is SSR, how to set up your first react SSR shows you some examples for SSR, and what are the pros and cons. And at the end, I will share the Github repo for Reactjs and VueJs + Nuxt for SSR setup.

So take a cup of coffee or anything you want 😎😉, let’s have some code.

What is SSR?

SSR stands for Server Side Rendering, and it is the process where the server sends data directly to the browser to draw a layout. Browser doesn’t need to call an API to fetch data from any source and manipulate the DOM(Document Object Model).

As you can see in the video Amazon is also using the SSR for its page rending, which means the browser getting the already rendered data, now the browser just has to paint it.

How to Setup SSR for Reactjs

Step 1 — Create the React App

Let’s call the app, react-ssr:

npx create-react-app react-ssr

You will get a file structure something like the below image

Then, cd into the new directory:

cd react-ssr

Finally, start the new client-side app in order to verify the installation:

npm start

Then, replace the existing lines of code of index.js with these new lines of code:

Step 2 — Creating an Express Server and Rendering the App Component

Next, create a new server directory in the project’s root directory:

mkdir server

Then, inside of the server directory, create a new index.js the file that will contain the Express server code:

nano server/index.js

Put the following code into the index.js

Step 3 — Configuring webpack, Babel, and npm scripts

Next, create a new Babel configuration file in the project’s root directory:

nano .babelrc.json

Then, add the env and react-app presets:

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

Create a new Babel configuration file in the project’s root directory:

nano webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve('server-build'),
filename: 'index.js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
}
};

Now, revisit package.json and add helper npm scripts:

"scripts": {
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "node server/index.js",
"dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
"dev:start": "nodemon ./server-build/index.js",
"dev": "npm-run-all --parallel build dev:*"
},

Let’s install those packages now by entering the following commands in your terminal window:

npm install nodemon --save-dev
npm install npm-run-all --save-dev

Now just have to run the following command in your project terminal

npm run dev

Source code: https://github.com/bytecodepandit/react-ssr-setup

Pros and Cons of SSR (Server Side Rendering)

The Pros of SSR

  • Quick initial access: with SSR your website’s pages are immediately available to interact with for your users, even on slow Internet connections. On a CSR app, users can’t interact with your website until the JS bundle containing the entire site is 100% loaded, which can take a while on big websites. With a decent server, SSR can give you a great First Contentful Paint score, which improves the user experience (UX) and probably your SEO page ranking as well.
  • Great for SEO: the search engines don’t need to run your JavaScript to read and index your content. CSR gets indexed as well, but not as fast as SSR. If your business depends on traffic, you have to use SSR.

As you can see the difference in the loading time in SSR and CSR in the video.

The Cons of SSR

  • Slower page transitions: browsing from page to page is often much slower with SSR than on CSR — at least if your pages contain heavy/complex data. With SSR you’re basically rendering your app twice, once on the server, and once on the client.
  • Vulnerability: SSR sites are harder to keep secure because they have a bigger surface to attack than CSR sites. This is however not an issue if you or your developers know what they’re doing.
  • Complex caching: configuring your cache is usually more complex on SSR sites than CSR sites.
  • Server cost: SSR often needs a bigger and more powerful server to provide high performance than CSR.
  • Higher latency: SSR sites tend to get a high latency if you get lots of traffic at the same time, which delays/slows down the browsing experience for everyone. CSR doesn’t suffer from this nearly as much. Latency is also known as ping rate which is usually measured in ms (milliseconds).

So guys this is all about the Server-Side Rendering, pretty simple right 😎✌.

Source for VueJs + Nuxt for SSR: https://github.com/bytecodepandit/ecommerce-vuejs-ssr

Conclusion

Through this blog, we learn what is SSR (Server-side rendering), how to set up ReactJs SSR projects, and what are the pros and cons of SSR.

Thanks for reading I hope the blog is informative for you 🙏✌️

--

--

--

Simplicity is the soul of efficiency. Fullstack software engineer. Degree in Computer Science. Tech Blogger, YouTuber, Traveler, and reading enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Excel Formulas to Fluidtable Reference Guide

Kick-start With NestJS

A Brief introduction to webpack for a beginner

Next.js Practical Introduction: Navigation and Routing

CORS Error in React.js

✨JAVASCRIPT AND ITS USE CASES✨

🚦 Submitting Form to different Actions in HTML5

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bytecode Pandit

Bytecode Pandit

Simplicity is the soul of efficiency. Fullstack software engineer. Degree in Computer Science. Tech Blogger, YouTuber, Traveler, and reading enthusiast.

More from Medium

From VanillaJS to ReactJS, Complete React Tutorial EP-1.

REACT JS MASTERING GUIDE — Day 1: Introduction to React JS (Part I)

Building a Node.js WebSocket Chat App with Socket.io

Protected Routes in React