What is server-side rendering (SSR) in React.js?

React is an open-source library based on JavaScript and is used for building user interfaces by dividing web pages into multiple components.

In React, we can use server-side rendering, the process of rendering React components on the server and then sending the rendered components as HTML-like markup to the client rather than rendering the components on the client's browser.

Note: To understand what is SSR and how it works, we can visit the link here.

SSR with React application

Now we will see how to carry out server-side rendering on an application that uses React for the front end and NodeJs for the back end.

  1. First, we would have to define the route on which we want to display a current web page, below we can see how we can define a home route in a NodeJs application.

app.get('/', (req,res) =>{
    // logic for home route
});
Syntax for home route

  1. Now in the home route, we wish to carry out server-side rendering. Suppose we want to get the HTML for the App component. This can be done using the renderToString() method of the ReactDOMServer library. Below we can see a code snippet on how to use this method.

ReactDOMServer.renderToString(<App />);
Function to return component HTML

  1. Once we have the HTML, we can send it to the client using the res.send() method inside our return statement.

return res.send( {/*Returning HTML logic*/} );
Return value for the route

Sample application

Below, we can see a React application that uses server-side rendering to render a web page for the client.

The server folder represents the code for the server side of the application that is responsible for SSR, and the src folder contains the React components that are to be rendered on the server side. 

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello Educative User!</h1>
      <h3>Welcome from the server</h3>
    </div>
  );
}

export default App;

Code explanation

Below, we can see a breakdown of the code in the above application.

In the server.js file, inside the server folder:

  • Line 6: We retrieve the App React component function that resides in the src folder.

  • Lines 12–19: Here, we define the home route function in which we will render the React component and return its inner HTML.

  • Line 14: We use the renderToString() function provided by the react-dom library to convert the React component into static HTML that can be sent to the client. We store the static HTML in the variable AppHTML.

  • Line 18: Finally, we return the static HTML and render it onto the home page illustrating server-side rendering by enclosing the AppHTML variable inside a <div> tag using JSX functionalities and sending it as a response.

  • Lines 21–23: Here, we write the function to start the Node.js server to listen on the defined port for incoming connections.

In the index.js file, inside the server folder:

  • Lines 1–8: Setting up the environment for server-side rendering by ignoring styles, enabling Babel to transpile modern JavaScript and JSX, and then executing the main server-side rendering logic from the server.js file.

In the App.js file, inside the src folder:

  • Lines 3–10: Here, we define the App component function. In the component, we render two heading tags, <h1> and <h3>, that contains a welcoming message for the web page visitor.

  • Line 12: Export the App component as the default export of the module.

Advantages and Limitations

Advantages

Limitations

Provides better performance on slow devices by relying less on clients resources.

Introducing separate server and client side code leads to complex infrastructure.

Search engine crawlers can easily read the server-rendered HTML, giving a high ranking.

SSR can put a high load on the server to deal with all the client's requests.

Can be used to improve security by allowing us to process HTML before rendering.

Loading large web pages can leads to a large payload size and increases network traffic.

Allows an application to run on multiple browsers that may not provide support for JavaScript.

Processing HTML on the server can lead to high application response time.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved