Client-side Rendering ( CSR )

First of all, a client is what we see on the screen – the user interface, it's the front-end part of the code. A server, on the other hand, is something that we cannot see. It's the backend side of the code, or the server code.

Now in Client Side Rendering, the application loads and it generates the output on the browser dynamically. In other words, the browser renders pages using JavaScript. In Client-Side Rendering (CSR) only the barebones HTML container for a page is rendered by the server. The logic, data fetching, templating and routing required to display content on the page is handled by JavaScript code that executes in the browser/client. CSR became popular as a method of building single-page applications. It helped to blur the difference between websites and installed applications.

Client-side rendering under the hood

Here is an overview of how CSR works in React as shown in the diagram above:

  • Initial HTML: When a user requests an HTML page, the server sends a minimal HTML file containing the necessary CSS and JavaScript files. In the first render, the HTML page may initially appear empty because React primarily utilizes JavaScript to generate and manipulate the content

  • JavaScript Bundle Execution: The browser downloads the JavaScript bundle, which includes the React application code and any other required dependencies.

  • Component Hierarchy Construction: React builds the component hierarchy based on the defined components and their relationships. This process occurs in memory and does not directly affect the HTML page.

  • Initial Rendering: Once the component hierarchy is constructed, React performs the initial rendering by comparing the Virtual DOM with the actual DOM. It identifies the differences and updates the actual DOM to reflect the desired UI structure.

  • Mounting Components: As the components are mounted in the initial render, React generates the HTML markup for each component and inserts it into the corresponding DOM nodes. This is when the content starts appearing on the page.

Once the initial render is complete and subsequent updates occur, React efficiently manages the DOM updates, resulting in a dynamic and interactive user interface.

JavaScript bundles and Performance

As the complexity of the page increases to show images, display data from a data store and include event handling, the complexity and size of the JavaScript code required to render the page will also increase. CSR resulted in large JavaScript bundles which increased the FCP ( First Contentful Paint ) and TTI ( Time to Interactive ) of the page.

⚠️
As shown in the above illustration, as the size of bundle.js increases, the FCP and TTI are pushed forward. This implies that the user will see a blank screen for the entire duration between FP and FCP.

Pros and Cons

With React, most of the application logic is executed on the client and it interacts with the server through API calls to fetch or save data. Almost all of the UI is thus generated on the client. The entire web application is loaded on the first request. As the user navigates by clicking on links, no new request is generated to the server for rendering the pages. The code runs on the client to change the UI & data.

Client-side Rendering allows us to have a Single-Page Application that supports navigation without page refresh and provides a great user experience. As the data processed to change the view is limited, routing between pages is generally faster making the CSR application seem more responsive. CSR also allows developers to achieve a clear separation between client and server code.

Despite the great interactive experience that it provides, there are a few pitfalls to this CSR.

  • SEO considerations: Most web crawlers can interpret server rendered websites in a straight-forward manner. Things get slightly complicated in the case of client-side rendering as large payloads and a waterfall of network requests (e.g for API responses) may result in meaningful content not being rendered fast enough for a crawler to index it.

  • Performance: With client-side rendering, the response time during interactions is greatly improved as there is no round trip to the server. However, for browsers to render content on client-side the first time, they have to wait for the JavaScript to load first and start processing. Thus users will experience some lag/white screen before the initial page loads. This may affect the user experience as the size of JS bundles get bigger and/or the client does not have sufficient processing power.

  • Data Fetching: With client-side rendering, data fetching is usually event-driven. The page could initially be loaded without any data. Data may be subsequently fetched on the occurrence of events like page-load or button-clicks using API calls. Depending on the size of data this could add to the load/interaction time of the application.

React.js OverviewServer-side Rendering ( SSR )