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.
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
homeroute in a NodeJs application.
app.get('/', (req,res) =>{// logic for home route});
Now in the
homeroute, we wish to carry out server-side rendering. Suppose we want to get the HTML for theAppcomponent. This can be done using therenderToString()method of theReactDOMServerlibrary. Below we can see a code snippet on how to use this method.
ReactDOMServer.renderToString(<App />);
Once we have the HTML, we can send it to the client using the
res.send()method inside ourreturnstatement.
return res.send( {/*Returning HTML logic*/} );
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
AppReact component function that resides in thesrcfolder.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 thereact-domlibrary to convert the React component into static HTML that can be sent to the client. We store the static HTML in the variableAppHTML.Line 18: Finally, we return the static HTML and render it onto the home page illustrating server-side rendering by enclosing the
AppHTMLvariable 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.jsfile.
In the App.js file, inside the src folder:
Lines 3–10: Here, we define the
Appcomponent 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
Appcomponent 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
