{"id":11382,"date":"2024-03-01T10:26:27","date_gmt":"2024-03-01T10:26:27","guid":{"rendered":"https:\/\/www.sphinx-solution.com\/blog\/?p=11382"},"modified":"2026-04-30T05:10:13","modified_gmt":"2026-04-30T05:10:13","slug":"server-side-rendering","status":"publish","type":"post","link":"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/","title":{"rendered":"Detailed Tutorial on React Server Side Rendering in 2026"},"content":{"rendered":"<p>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 <strong><a title=\"\" href=\"https:\/\/www.sphinx-solution.com\/web-development\/\" target=\"_blank\" rel=\"noopener\">web development company<\/a><\/strong> went over this subject in detail, making sure it&#x2019;s simple enough for newcomers to learn as well.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"><\/path><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#What_is_Server_Side_Rendering_SSR\" title=\"What is Server Side Rendering (SSR)?\">What is Server Side Rendering (SSR)?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#Advantages_of_Using_SSR\" title=\"Advantages of Using SSR\">Advantages of Using SSR<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#Disadvantages_of_Using_SSR\" title=\"Disadvantages of Using SSR\">Disadvantages of Using SSR<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#Server-Side_Rendering_Vs_Client-Side_Rendering\" title=\"Server-Side Rendering Vs. Client-Side Rendering&#xA0;\">Server-Side Rendering Vs. Client-Side Rendering&#xA0;<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#Implementing_Server_Side_Rendering_in_React\" title=\"Implementing Server Side Rendering in React\">Implementing Server Side Rendering in React<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#React_SSR_SEO_Benefits\" title=\"React SSR SEO Benefits\">React SSR SEO Benefits<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#React_SSR_Performance_Benefits\" title=\"React SSR Performance Benefits\">React SSR Performance Benefits<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.sphinx-solution.com\/blog\/server-side-rendering\/#FAQ\" title=\"FAQ\">FAQ<\/a><\/li><\/ul><\/nav><\/div>\n&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"what-is-server-side-rendering-ssr\"><span class=\"ez-toc-section\" id=\"What_is_Server_Side_Rendering_SSR\"><\/span><strong>What is Server Side Rendering (SSR)?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p>SSR or Server-Side Rendering is the&#xA0; 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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>It&#x2019;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.<\/li>&#13;\n<\/ul>&#13;\n&#13;\n&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>SSR eliminates the need for client-side JavaScript execution thus enabling programmers to design interactive and effective user interfaces.&#xA0;<\/li>&#13;\n<\/ul>&#13;\n&#13;\n&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>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.<\/li>&#13;\n<\/ul>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<p class=\"call_heading\">Looking For Web App Development Services?<\/p>&#13;\n<p>We offer custom web app development services, tailored to meet all your unique business needs.<\/p>&#13;\n<div class=\"sec-btn\"><a class=\"btn btn-green btn-pos hvr-ripple-out mb0 mt15 newsletter-green open-qouteform\" href=\"https:\/\/www.sphinx-solution.com\/contact\/?utm_source=website&amp;utm_medium=blog-detailed-tutorial-on-react-server-side-rendering&amp;utm_campaign=contact-us-organic\" target=\"_blank\" rel=\"noopener\" data-medium=\"B_1\">Contact Us<\/a><\/div>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"advantages-of-using-ssr\"><span class=\"ez-toc-section\" id=\"Advantages_of_Using_SSR\"><\/span><strong>Advantages of Using SSR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>1. <\/strong>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>2. <\/strong>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>3.<\/strong> SSR offers quicker initial page loads, as all required data is already rendered on the server before being delivered to the client&#x2019;s browser,&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>4.<\/strong> 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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>5.<\/strong> Server-rendered pages are easier for search engine bots to index, resulting in improved search engine optimisation (SEO) for your website.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>6.<\/strong> Users with lagging devices or bad networks will still see a fully rendered page, since rendering is handled by the server.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>7. <\/strong>In complicated sites with a large amount of dynamic content, SSR&#x2019;s performance aid might offset its SEO advantages.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"disadvantages-of-using-ssr\"><span class=\"ez-toc-section\" id=\"Disadvantages_of_Using_SSR\"><\/span><strong>Disadvantages of Using SSR<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>1. <\/strong>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>2. <\/strong>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>3.<\/strong> By adding distinct layers of code required for both server-side rendering and browser-side scripting, SSR adds complexity to an application.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>4. <\/strong>SSR could lead to higher development expenses since it can be more challenging to adopt and maintain than CSR.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<h4>Check Out Related Posts<\/h4>&#13;\n<p class=\"call_heading\"><a href=\"https:\/\/www.sphinx-solution.com\/web-development\/\">Web App Development Services<\/a><\/p>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Server-Side_Rendering_Vs_Client-Side_Rendering\"><\/span>Server-Side Rendering Vs. Client-Side Rendering&#xA0;<span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p>While building a website, you need to choose how the pages will load and how they will appear to the users. <strong>Server-Side<\/strong> <strong>Rendering<\/strong> (SSR) and <strong>Client-Side Rendering<\/strong> (CSR) are the two most common methods for this. Let&#x2019;s know about both clearly:&#xA0;&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Server-Side Rendering (SSR)&#xA0;<\/h3>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>However, there&#x2019;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&#x2019;s because the server has to process and send everything first.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Client-Side Rendering (CSR)&#xA0;<\/h3>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>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&#x2019;s especially helpful for people on slower connections or when data costs are a concern.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"implementing-server-side-rendering-in-react\"><span class=\"ez-toc-section\" id=\"Implementing_Server_Side_Rendering_in_React\"><\/span><strong>Implementing Server Side Rendering in React<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p>First, we&#x2019;ll use the create-react-app command-line function to build a new React project.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Execute the following command in your terminal:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npx create-react-app ssr-react-app<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>cd ssr-react-app<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>This will open the project directory and create a new React project named ssr-react-app.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Adding Express Server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>We are going to configure an Express server for server-side rendering now. Install the required prerequisites first:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npm install express<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ server\/index.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const express = require(&#x2018;express&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const app = express();<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const PORT = process.env.PORT || 3001;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>app.listen(PORT, () =&gt; {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>console.log(`Server is listening on port ${PORT}`);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>});<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>This line of code creates an Express application and sets it up to listen on port 3001.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<h4>Check Out Related Posts<\/h4>&#13;\n<p class=\"call_heading\"><a href=\"https:\/\/www.sphinx-solution.com\/blog\/mean-stack-development\/\">MEAN Stack Development for Web Apps<\/a><\/p>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Building React Components for SSR<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Let&#x2019;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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ src\/AppServer.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>import React from &#x2018;react&#x2019;;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const AppServer = () =&gt; {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;return (<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello from Server-Side Rendered React App!&lt;\/h1&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>};<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>export default AppServer;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>export default AppServer;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>We define a basic functional component that shows a header in this file.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Setting up Webpack for SSR<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>We must use Webpack to bundle our React application in order to leverage server-side rendering. Let&#x2019;s install the necessary dependencies first:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<figure class=\"wp-block-table\">&#13;\n<table>&#13;\n<tbody>&#13;\n<tr>&#13;\n<td><strong>npm install webpack webpack-cli webpack-node-externals @babel\/core @babel\/preset-env @babel\/preset-react babel-loader &#x2013;save-dev<\/strong><\/td>&#13;\n<\/tr>&#13;\n<\/tbody>&#13;\n<\/table>&#13;\n<\/figure>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ webpack.server.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const path = require(&#x2018;path&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const nodeExternals = require(&#x2018;webpack-node-externals&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>module.exports = {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;target: &#x2018;node&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;mode: &#x2018;development&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;externals: [nodeExternals()],<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;entry: &#x2018;.\/server\/index.js&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;output: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;filename: &#x2018;server.js&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;path: path.resolve(__dirname, &#x2018;build&#x2019;),<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;module: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;rules: [<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;{<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;test: \/\\.(js|jsx)$\/,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;exclude: \/node_modules\/,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;use: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;loader: &#x2018;babel-loader&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;options: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;presets: [<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#x2018;@babel\/preset-env&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#x2018;@babel\/preset-react&#x2019;,<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;],<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;],<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;resolve: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#xA0;&#xA0;extensions: [&#x2018;.js&#x2019;, &#x2018;.jsx&#x2019;],<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;},<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>};<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>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.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Now update your package.json file using a new script to create the server-side bundle.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#x201C;scripts&#x201D;: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>&#xA0;&#xA0;&#x2026;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#x201C;build:server&#x201D;: &#x201C;webpack &#x2013;config webpack.server.js&#x201D;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>}<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<h4>Check Out Related Posts<\/h4>&#13;\n<p class=\"call_heading\"><a href=\"https:\/\/www.sphinx-solution.com\/blog\/react-and-nodejs-the-best-combination-for-web-application-development\/\">Web Application Development<\/a><\/p>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Rendering the React Component on the Server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>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:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npm run build:server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>In the build folder, a server.js file is created by this command.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>To render the AppServer component, update the server\/index.js file:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ server\/index.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const express = require(&#x2018;express&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const React = require(&#x2018;react&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const ReactDOMServer = require(&#x2018;react-dom\/server&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const AppServer = require(&#x2018;..\/src\/AppServer&#x2019;).default;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const app = express();<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const PORT = process.env.PORT || 3001;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>app.get(&lsquo;\/&rsquo;, (req, res) =&gt; {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;const content = ReactDOMServer.renderToString(&lt;AppServer \/&gt;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;const html = `<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!DOCTYPE html&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;html lang=&rdquo;en&rdquo;&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=&rdquo;UTF-8&Prime; \/&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=&rdquo;viewport&rdquo; content=&rdquo;width=device-width, initial-scale=1.0&Prime; \/&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;React SSR&lt;\/title&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/head&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id=&rdquo;root&rdquo;&gt;${content}&lt;\/div&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/html&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;`;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;res.send(html);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>});<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>app.listen(PORT, () =&gt; {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;console.log(`Server is listening on port ${PORT}`);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>});<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"bullet-new-box\">&#13;\n<ul class=\"step\">&#13;\n<li>The AppServer component is imported into this file<\/li>&#13;\n<li>ReactDOMServer.renderToString() is used to transform it into an HTML string<\/li>&#13;\n<li>And the resultant HTML is sent to the client<\/li>&#13;\n<\/ul>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Running the Application<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Our server is now configured, and we can launch the application. Include a fresh script in your bundle.JSON file for server startup:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#x201C;scripts&#x201D;: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#x2026;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#x201C;start:server&#x201D;: &#x201C;node build\/server.js&#x201D;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>}<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>To initiate the server, use the below given command:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npm run start:server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Launch your web browser and go to http:\/\/localhost:3001. The message &#x201C;Hello from Server-Side Rendered React App!&#x201D; should appear.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<h4>Check Out Related Posts<\/h4>&#13;\n<p class=\"call_heading\"><a href=\"https:\/\/www.sphinx-solution.com\/blog\/top-web-app-database-list\/\">Top Web App Database List in 2025 <\/a><\/p>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Hydrating the Application (Hydration in SSR)<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>By hydrating applications, We can take advantage of client-side React to &#x201C;hydrate&#x201D; the server-rendered HTML and enhance the user experience. This gives the client control and permits interaction.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>First, add an interactive element, like a button, to the src\/AppServer.js file:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ src\/AppServer.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>import React, { useState } from &#x2018;react&#x2019;;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const AppServer = () =&gt; {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;const [count, setCount] = useState(0);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;return (<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello from Server-Side Rendered React App!&lt;\/h1&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Counter: {count}&lt;\/p&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;\/button&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>};<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>export default AppServer;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><em>We included a button to increase the count and added a basic counter state in this revised component.<\/em><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>To utilize the ReactDOM.hydrate() function, change the src\/index.js code as follows:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ src\/index.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>import React from &#x2018;react&#x2019;;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>import ReactDOM from &#x2018;react-dom&#x2019;;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>import AppServer from &#x2018;.\/AppServer&#x2019;;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>ReactDOM.hydrate(&lt;AppServer \/&gt;, document.getElementById(&lsquo;root&rsquo;));<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Lastly, to serve the client-side bundle, update the server\/index.js file:<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ server\/index.js<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>const path = require(&#x2018;path&#x2019;);<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ &#x2026;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>app.use(express.static(path.resolve(__dirname, &#x2018;..\/build&#x2019;)));<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>\/\/ &#x2026;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Include a fresh script in your bundle.json file to create the client-side bundle.<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#x201C;scripts&#x201D;: {<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#x2026;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>&#xA0;&#xA0;&#x201C;build:client&#x201D;: &#x201C;npm run build&#x201D;<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>}<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Create the server-side and client-side bundles at this point:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npm run build:client<br>npm run build:server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Launch the server:<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>npm run start:server<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>Open your browser and navigate to http:\/\/localhost:3001. The server-rendered React application with a working counter button should be displayed.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>Things we did:<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>In the above example, We examined server-side rendering (SSR) with React.js.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"bullet-new-box\">&#13;\n<ul class=\"step\">&#13;\n<li>We installed an Express server.<\/li>&#13;\n<li>Then made a basic React component<\/li>&#13;\n<li>And then bundled the application with Webpack and Babel<\/li>&#13;\n<li>To enhance user experience, we also included server-side rendering and hydration<\/li>&#13;\n<\/ul>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"react-ssr-seo-benefits\"><span class=\"ez-toc-section\" id=\"React_SSR_SEO_Benefits\"><\/span><strong>React SSR SEO Benefits<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"bullet-new-box\">&#13;\n<ul class=\"step\">&#13;\n<li>SSR enhances SEO, by making it simpler for search engines to access and index information.<\/li>&#13;\n<li>By sending the client fully rendered HTML, SSR facilitates search engines&#x2019; comprehension of the information.<\/li>&#13;\n<li>Since SSR pages offer a better user experience, search engines might grant them a higher ranking.<\/li>&#13;\n<li>SSR can assist in making sure that all of the page&#x2019;s content, including JavaScript-generated material, is accessible to search engines.<\/li>&#13;\n<\/ul>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"react-ssr-performance-benefits\"><span class=\"ez-toc-section\" id=\"React_SSR_Performance_Benefits\"><\/span><strong>React SSR Performance Benefits<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"bullet-new-box\">&#13;\n<ul class=\"step\">&#13;\n<li>Since the browser may begin producing the page as soon as it gets the initial HTML and JavaScript files, CSR can provide quicker initial page load times.<\/li>&#13;\n<li>As the server must render the HTML, CSS, and JavaScript before transferring it to the client, SSR may load pages more slowly at first.<\/li>&#13;\n<li>As the server has finished the rendering process, navigating within the website will likely be faster when the page loads.<\/li>&#13;\n<li>Slow devices would benefit from SSR&#x2019;s ability to decrease client-side processing.<\/li>&#13;\n<li>SSR may improve speed by lowering the amount of network queries needed to load a page.<\/li>&#13;\n<\/ul>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<div class=\"callout_box\">&#13;\n<p class=\"call_heading\">Want to Hire Professional Web Developers?<\/p>&#13;\n<p>We use top leading technologies to deliver end-to-end web app development services for your business.<\/p>&#13;\n<div class=\"sec-btn\"><a class=\"btn btn-green btn-pos hvr-ripple-out mb0 mt15 newsletter-green open-qouteform\" href=\"https:\/\/calendly.com\/sphinx-solutions\/30min?utm_source=website&amp;utm_medium=blog-detailed-tutorial-on-react-server-side-rendering&amp;utm_campaign=book-an-appointment-organic\" target=\"_blank\" rel=\"noopener\" data-medium=\"B_1\">Book an Appointment<\/a><\/div>&#13;\n<\/div>&#13;\n&#13;\n&#13;\n&#13;\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<p>In summary, &#x2018;React Server-side Rendering&#x2019; 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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>With React&#x2019;s growing popularity, having insightful and experienced engineers is essential to making your project a success. If you&#x2019;re planning to <strong><a href=\"https:\/\/www.sphinx-solution.com\/web-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">hire web developers<\/a><\/strong> who can provide excellent solutions that are customised to your needs, Have a conversation with our professionals right away!<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">Which is better, SSR or CSR?<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">When should we use SSR?<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>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&#x2019;s crucial to thoroughly weigh all possibilities before utilizing it.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p><strong>How does React SSR work?<\/strong><\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">How can I use React to implement SSR?<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">What is an example of SSR?&#xA0;<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>An example of Server-Side Rendering (SSR) is when a web page&#x2019;s HTML is created on the server before it&#x2019;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.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">What are the steps of SSR?&#xA0;<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>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.&#xA0;<\/p>&#13;\n&#13;\n&#13;\n&#13;\n<h4 class=\"wp-block-heading\">What are the components of SSR?&#xA0;<\/h4>&#13;\n&#13;\n&#13;\n&#13;\n<p>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).&#xA0;<\/p>&#13;\n","protected":false},"excerpt":{"rendered":"<p>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&#x2026;\n<\/p>","protected":false},"author":21,"featured_media":11397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[1],"tags":[1413,1412,275,1092,1093],"class_list":{"0":"post-11382","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-technology","8":"tag-hire-web-developers","9":"tag-server-side-renderings","10":"tag-web-development-company","11":"tag-web-development-services","12":"tag-web-development-solutions"},"aioseo_notices":[],"featured_image_src":"https:\/\/www.sphinx-solution.com\/blog\/wp-content\/uploads\/2024\/03\/server-side-rendering.webp","author_info":{"display_name":"Shaili Gupta","author_link":"https:\/\/www.sphinx-solution.com\/blog\/author\/shaili-gupta\/"},"_links":{"self":[{"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/posts\/11382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/comments?post=11382"}],"version-history":[{"count":33,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/posts\/11382\/revisions"}],"predecessor-version":[{"id":22277,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/posts\/11382\/revisions\/22277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/media\/11397"}],"wp:attachment":[{"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/media?parent=11382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/categories?post=11382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sphinx-solution.com\/blog\/wp-json\/wp\/v2\/tags?post=11382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}