<p>In a standard React application, the browser receives an empty HTML shell from the server along with the JavaScript instructions to construct the UI.</p>
<p>This is called <strong>Client-Side Rendering</strong> (<em>CSR</em>) because the initial rendering work happens on the user’s device.</p>
<p><img src="/images/CSR.png" alt="Client-Side Rendering schematics" title="Client-Side Rendering"></p>
<h2>Advantages</h2>
<ul>
<li>Fast rendering process</li>
<li>Simple and fast navigation</li>
<li>Lower server load</li>
<li>Relevant for web applications</li>
</ul>
<h2>Disadvantages</h2>
<ul>
<li>Slow loading for the first time on the website</li>
<li>Need for external framework libraries</li>
<li>A weak side of SEO</li>
<li>Some or all content is not included</li>
</ul>
<h2>When to use Client-Side rendering?</h2>
<p>The client-side rendering has its peculiarities and unique options. It will not suits all web solutions, but it will be appropriate if:</p>
<ul>
<li>The web app is going to have a compound UI design: the application will consist of a big number of pages with diverse functions</li>
<li>The content of the pages needs frequent updating or there is a large amount of dynamic data</li>
<li>The page content is related to logged users data</li>
<li>The aim is a large number of users, and the app should be designed for it</li>
<li>This type of rendering gives a potential opportunity for a mobile app for the same project, so it is better to develop API + Front-End from the beginning if we would like to develop a native mobile app in the future</li>
<li>The acquisition strategy doesn’t prioritize SEO</li>
</ul>
