Client-Side Rendering (CSR)

Client-Side Rendering (CSR) is a common technique in modern web development, used to create interactive and dynamic applications. With this technique we remove the responsibility for rendering the page from the server and bring it to the client side, letting the server take care of what is most important to it, the business rules. Making this separation made it possible to offer a more fluid, dynamic user experience and enables the creation of new types of applications. The advantages are diverse, but at the same time there are trade-offs that must be evaluated in each project whether or not it is worth adopting this technique.

What is Client-Side Rendering (CSR)?

Client-side rendering or just CSR, is a dynamic application development technique where interface rendering occurs on the client side (browser). This is different from how it was done before this technique became popular, where the server was responsible for rendering the page, returning to the client an HTML file with all the content already assembled.

With CSR we pass the role of rendering the page to the browser (client). The server just sends a basic HTML file that internally contains links to Javascript files. Upon receiving this HTML, the browser downloads the referenced Javascript files that are responsible for rendering the page content. The advantage of CRS is that once the Javascript files are loaded, the content can be dynamically updated without depending on new requests to the server. Making the browsing experience more fluid for the user. CSR is generally used in applications where there is a need for real-time interactions or very dynamic content, for example, in single-page applications (SPA). Being a solution for internal pages, dashboards, or systems where there is no need for SEO.

How does Client-Side Rendering work?

An example of a rendering flow using Client-Side Rendering would be:

1. The user accesses a web page, which internally sends a request to the server.
   

2. The server receives the request and responds by sending basic HTML containing practically only links to JavaScript and CSS files.
   

3. The browser downloads this HTML and, once finished, sends new requests to download the JavaScript and CSS files that were referenced in the HTML.
   

4. With the JavaScript files having been downloaded, they will be executed and the process of rendering the page will be carried out.
   

5. From this point on, JavaScript controls the entire application and user interactions, updating the page content dynamically, without new requests to the server.

Advantages of Client-Side Rendering

• Speed: Navigation between pages within a CSR is extremely fast, as there is no need to make multiple requests to the server after initial loading.
• User Experience: CSR usage is highly understandable and performs well, providing an experience similar to native applications.
• Separation of Concerns: CSR enables separation between the Front-end and Back-end, allowing the Front-end to be completely managed by JS, while the Back-end only takes care of the data and business logic .

Disadvantages of Client-Side Rendering

• High JS load: In large applications, JS files can become very heavy, which can harm the user experience, especially on the initial application load.
• SEO Problems: As the page content is rendered on the client side, search engines have difficulty indexing the content, as they need the rendered HTML and in an application with CSR the HTML is practically empty. This can be a disadvantage for applications that depend on SEO such as landing pages and e-commerces.
• Client dependent: As the application runs on the client side, there is a dependence on how much resources it has, which can negatively affect the user experience if their device has few resources. Furthermore, if the device has JavaScript execution disabled, the application will not work.

Conclusion

In this article, we present the main important points about the use of CSR, presenting the fundamentals and its advantages and disadvantages. Through the CSR flow, we know the main stages of the CSR life cycle. We can see the importance of JavaScript in providing applications that run entirely on the client side. Despite the benefits of CSR related to user experience, it is clear that this rendering technique has some disadvantages related to high JavaScript load and SEO-related problems.

To overcome the limitations of CSR, we have solutions such as Static Site Generation (SSG) and Server-Side Rendering (SSR). In SSG, pages are generated statically during the build period, resulting in HTML ready to be delivered to the client. And in the case of SSR, the rendering is done on the server side, which responds with HTML already rendered to the client.

The above is the detailed content of Client-Side Rendering (CSR). For more information, please follow other related articles on the PHP Chinese website!