Detailed Tutorial on React Server Side Rendering in 2025

Welcome to this in-depth tutorial on using React.js for server-side rendering (SSR). We will explore the idea of SSR in detail, comprehend its advantages, and discover how to put it into practice using React.js in this lesson. The researchers in our web development company went over this subject in detail, making sure it’s simple enough for newcomers to learn as well.

What is Server Side Rendering (SSR)?

SSR or Server-Side Rendering is the  process of rendering/executing web pages on the server instead of the browser. After integrating SSR, the HTML is created by the server and sent to the browser, which instantly displays the content.

• It’s a common practice to send clients a completely rendered page after producing a client-side single page application (SPA) on the server. This makes it possible to offer dynamic components as static HTML markup.

• SSR eliminates the need for client-side JavaScript execution thus enabling programmers to design interactive and effective user interfaces. 

• SSR could also help with search engine optimisation (SEO), if indexing is handling JavaScript improperly. It could also be useful when a sluggish network prevents a huge JavaScript package from downloading.

Advantages of Using SSR

1. Modern technologies such as Node.js allow us to optimise the process of bringing material from the backend straight into our frontend coding. This is accomplished with the use of server-side rendered components inside our application codebase.

2. When displayed only through Client-Side, features like APIs or custom event handlers might not always function as intended. However, they work as expected with server side rendering.

3. SSR offers quicker initial page loads, as all required data is already rendered on the server before being delivered to the client’s browser, 

4. You could almost eliminate any possible waiting periods for elements or components of an application or website, by having the majority of your application rendered ahead of time.

5. Server-rendered pages are easier for search engine bots to index, resulting in improved search engine optimisation (SEO) for your website.

6. Users with lagging devices or bad networks will still see a fully rendered page, since rendering is handled by the server.

7. In complicated sites with a large amount of dynamic content, SSR’s performance aid might offset its SEO advantages.

Disadvantages of Using SSR

1. Even though React provides significantly better performance than other frameworks when SSR is used appropriately, it still falls short of native mobile apps with respect to responsiveness and speed, primarily because native apps operate completely locally and hardly require a network connection, unlike web pages.

2. To adequately support SSR, more infrastructure, time, and efforts must be invested throughout development. When creating a conventional website, this is not required because HTML or JavaScript code could render every element on the client side.

3. By adding distinct layers of code required for both server-side rendering and browser-side scripting, SSR adds complexity to an application.

4. SSR could lead to higher development expenses since it can be more challenging to adopt and maintain than CSR.

Server-Side Rendering Vs. Client-Side Rendering 

While building a website, you need to choose how the pages will load and how they will appear to the users. Server-Side Rendering (SSR) and Client-Side Rendering (CSR) are the two most common methods for this. Let’s know about both clearly:  

Server-Side Rendering (SSR) 

With SSR, the website can be created on the server and sent fully prepared to the browser. This approach is great for improving visibility on search engines (SEO) since search engines can easily read the content before showing it to users. 

However, there’s a catch, as users might experience a short delay before seeing anything on their screens, especially if their internet connection is slow or data is expensive. It’s because the server has to process and send everything first. 

Client-Side Rendering (CSR) 

When the browser loads the page in CSR, it starts with just a basic structure (an HTML skeleton) and some styling. Then, additional content is fetched and displayed bit by bit as you interact with the page. 

This method feels faster for users because they see something almost immediately, even if the rest of the page takes a moment to load fully. It’s especially helpful for people on slower connections or when data costs are a concern. 

Implementing Server Side Rendering in React

First, we’ll use the create-react-app command-line function to build a new React project.

Execute the following command in your terminal:

npx create-react-app ssr-react-app

cd ssr-react-app

This will open the project directory and create a new React project named ssr-react-app.

Adding Express Server

We are going to configure an Express server for server-side rendering now. Install the required prerequisites first:

npm install express

Next, add a new file named index.js to the server folder that you just created at the project root. The settings for the Express server will be contained in this file.

// server/index.js

const express = require(‘express’);

const app = express();

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {

console.log(`Server is listening on port ${PORT}`);

});

This line of code creates an Express application and sets it up to listen on port 3001.

Building React Components for SSR

Let’s now build a basic React component that will be rendered on the server. Make a new file named AppServer.js in the source folder. The server-rendered variant of our application will be this component.

// src/AppServer.js

import React from ‘react’;

const AppServer = () => {

  return (

    <div>

      <h1>Hello from Server-Side Rendered React App!</h1>

    </div>

  );

};

export default AppServer;

export default AppServer;

We define a basic functional component that shows a header in this file.

Setting up Webpack for SSR

We must use Webpack to bundle our React application in order to leverage server-side rendering. Let’s install the necessary dependencies first:

npm install webpack webpack-cli webpack-node-externals @babel/core @babel/preset-env @babel/preset-react babel-loader –save-dev

Next, in the project root, create a new file named webpack.server.js. The Webpack settings for server-side rendering will be contained in this file.

// webpack.server.js

const path = require(‘path’);

const nodeExternals = require(‘webpack-node-externals’);

module.exports = {

  target: ‘node’,

  mode: ‘development’,

  externals: [nodeExternals()],

  entry: ‘./server/index.js’,

  output: {

    filename: ‘server.js’,

    path: path.resolve(__dirname, ‘build’),

  },

  module: {

    rules: [

      {

        test: /\.(js|jsx)$/,

        exclude: /node_modules/,

        use: {

          loader: ‘babel-loader’,

          options: {

            presets: [

              ‘@babel/preset-env’,

              ‘@babel/preset-react’,

            ],

          },

        },

      },

    ],

 },

  resolve: {

    extensions: [‘.js’, ‘.jsx’],

  },

};

The input and output pathways are configured in this setup, and the target is set to node. In order to provide support for contemporary syntax and React components, we additionally configured the Babel loader to transpile our JavaScript code.

Now update your package.json file using a new script to create the server-side bundle.

“scripts”: {

  …

  “build:server”: “webpack –config webpack.server.js”

}

Rendering the React Component on the Server

Now that Webpack is configured, the React component has to be rendered on the server. First, use the following command to construct the server-side bundle:

npm run build:server

In the build folder, a server.js file is created by this command.

To render the AppServer component, update the server/index.js file:

// server/index.js

const express = require(‘express’);

const React = require(‘react’);

const ReactDOMServer = require(‘react-dom/server’);

const AppServer = require(‘../src/AppServer’).default;

const app = express();

const PORT = process.env.PORT || 3001;

app.get(‘/’, (req, res) => {

  const content = ReactDOMServer.renderToString(<AppServer />);

  const html = `

    <!DOCTYPE html>

    <html lang=”en”>

      <head>

        <meta charset=”UTF-8″ />

        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

        <title>React SSR</title>

      </head>

      <body>

        <div id=”root”>${content}</div>

      </body>

    </html>

  `;

  res.send(html);

});

app.listen(PORT, () => {

  console.log(`Server is listening on port ${PORT}`);

});

Running the Application

Our server is now configured, and we can launch the application. Include a fresh script in your bundle.JSON file for server startup:

“scripts”: {

  …

  “start:server”: “node build/server.js”

}

To initiate the server, use the below given command:

npm run start:server

Launch your web browser and go to http://localhost:3001. The message “Hello from Server-Side Rendered React App!” should appear.

Hydrating the Application (Hydration in SSR)

By hydrating applications, We can take advantage of client-side React to “hydrate” the server-rendered HTML and enhance the user experience. This gives the client control and permits interaction.

First, add an interactive element, like a button, to the src/AppServer.js file:

// src/AppServer.js

import React, { useState } from ‘react’;

const AppServer = () => {

  const [count, setCount] = useState(0);

  return (

    <div>

      <h1>Hello from Server-Side Rendered React App!</h1>

      <p>Counter: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

};

export default AppServer;

We included a button to increase the count and added a basic counter state in this revised component.

To utilize the ReactDOM.hydrate() function, change the src/index.js code as follows:

// src/index.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import AppServer from ‘./AppServer’;

ReactDOM.hydrate(<AppServer />, document.getElementById(‘root’));

Lastly, to serve the client-side bundle, update the server/index.js file:

// server/index.js

const path = require(‘path’);

// …

app.use(express.static(path.resolve(__dirname, ‘../build’)));

// …

Include a fresh script in your bundle.json file to create the client-side bundle.

“scripts”: {

  …

  “build:client”: “npm run build”

}

Create the server-side and client-side bundles at this point:

npm run build:client
npm run build:server

Launch the server:

npm run start:server

Open your browser and navigate to http://localhost:3001. The server-rendered React application with a working counter button should be displayed.

Things we did:

In the above example, We examined server-side rendering (SSR) with React.js.

React SSR SEO Benefits

React SSR Performance Benefits

Conclusion

In summary, ‘React Server-side Rendering’ provides an effective way to build dynamic and effective online applications. By rendering web pages on the server before sending them to the client, it significantly improves page load times and offers a better experience for those with slower devices or limited processing capacity. Thus preserving consistency across different browsers.

With React’s growing popularity, having insightful and experienced engineers is essential to making your project a success. If you’re planning to hire web developers who can provide excellent solutions that are customised to your needs, Have a conversation with our professionals right away!

FAQ

Which is better, SSR or CSR?

In some cases, React server-side rendering can outperform client-side rendering. For instance, SSR might offer a quicker initial load time than CSR if your application requires a lot of data or content to load before generating the page. CSR could be quicker, though, if the majority of the material is produced dynamically using JavaScript.

When should we use SSR?

SSR can be helpful in a variety of situations, such as, to boost SEO, speed up poor network connections, or handle enormous amounts of data or material. Applications that must render on low-end devices or those that demand a high degree of accessibility may find SSR to be helpful as well. SSR can, however, increase the cost and complexity of your program, thus it’s crucial to thoroughly weigh all possibilities before utilizing it.

How does React SSR work?

The renderToString() function in React can be used to convert a React component into an HTML string. The HTML markup for the first page load is created using this procedure. After that, the client receives the finished HTML.

How can I use React to implement SSR?

SSR can be applied in React in a few different ways. A common method is to utilise a library like Gatsby.js or Next.js. Many capabilities offered by these frameworks facilitate the implementation of SSR in React apps.

Making use of a personalised server-side rendering technology is an additional strategy for integrating SSR with React. Although, its implementation may be more difficult, you have greater control over the SSR process with this technique.

What is an example of SSR? 

An example of Server-Side Rendering (SSR) is when a web page’s HTML is created on the server before it’s sent to your browser. For instance, when you visit a news website, the server builds the page with all the latest articles, and you see the fully loaded content right away without waiting for extra scripts to load in your browser. 

What are the steps of SSR? 

The steps of SSR include receiving a request from the user, generating the HTML content on the server by processing data and templates, sending this ready-to-view HTML back to the browser, and finally, rendering the page for the user to interact with. 

What are the components of SSR? 

The main components of SSR are the server (where the HTML is generated), the templating engine (used to combine data with design), the database or API (where the content comes from), and the browser (where the server-prepared page is displayed to the user).