Comparison between Client-Side Rendering and Server-Side Rendering: Impacts on Performance and User Experience

Introduction to Rendering in Web Applications

When we talk about web application development, one of the most crucial aspects to consider is how content is rendered. The rendering process can be performed on the client side (Client-Side Rendering - CSR) or on the server side (Server-Side Rendering - SSR). Each approach has its advantages and disadvantages, directly impacting performance and user experience (ISKANDAR et al., 2020). In this article, we will explore these two techniques in depth, analyzing their implications and providing practical examples in C#.

What is Client-Side Rendering?

Client-Side Rendering is a method in which the application content is generated in the user's browser (ISKANDAR et al., 2020). This means that after the initial page load, subsequent interactions generally do not require new requests to the server to render the content, as most of the processing is done on the client side. CSR can allow for a smoother and more responsive interaction, but the user experience may be compromised if JavaScript does not load quickly.

A typical example of CSR is the use of frameworks like React, Angular, or Vue.js. In these cases, the server delivers a basic HTML page along with a JavaScript bundle, which is responsible for manipulating the DOM and rendering the application. This development pattern increases complexity but also offers greater flexibility to create dynamic and interactive interfaces.

Below is an example of C# code, providing a JSON response from an endpoint:

// Product class with simple properties
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{

    // GET method to return products
    [HttpGet]
    public async Task < IActionResult > GetProductsAsync()
    {
        // Creating a list of products as an example
        var products = new List
        {
            new Product { Id = 1, Name = "Product A", Price = 10.99M },
            new Product { Id = 2, Name = "Product B", Price = 20.99M }
        };

        // Returning the list of products as JSON
        return Ok(products);
    }
}

Operation of CSR:

User accesses the website
       ¦
       V
+----------------------+ 
¦ Request sent to the  ¦ 
¦      Web Server      ¦ 
+----------------------+ 
       ¦ 
       V 
+----------------------+ 
¦ Server returns a     ¦ 
¦  basic HTML file     ¦ 
¦  and JavaScript (JS) ¦ 
+----------------------+ 
       ¦ 
       V 
+----------------------+ 
¦ Browser downloads    ¦ 
¦ and executes JS      ¦ 
+----------------------+ 
       ¦ 
       V 
+----------------------+ 
¦ JS makes API calls   ¦ 
¦  to fetch data (JSON)¦ 
+----------------------+ 
       ¦ 
       V 
+----------------------+ 
¦ JS dynamically       ¦ 
¦ renders the content  ¦ 
¦ in the browser       ¦ 
+----------------------+ 
       ¦ 
       V 
User interacts with the page
(SPA application is active and fast)

What is Server-Side Rendering?

Server-Side Rendering, on the other hand, refers to the process in which the content rendering happens on the server before the page is sent to the client (ISKANDAR et al., 2020). This means that the server generates the HTML and sends it to the browser, where the content is displayed immediately to the user, without the need for additional processing on the client side. This approach can result in a faster initial loading time, as the user receives a pre-rendered page.

Frameworks like ASP.NET MVC or Razor Pages are examples of technologies that support SSR. The initial rendering is fast because the browser receives a fully rendered HTML page. It is important to note that while SSR can be faster at the start, subsequent navigation may be slower since each interaction generally results in a new request to the server.

Below is an example of C# code that initiates the rendering of a View to generate dynamic HTML on the server:

// Product class with simple properties
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[Route("api/[controller]")]
public class ProductsController : ControllerBase
{

    // GET method to return products
    [HttpGet]
    public IActionResult GetProducts()
    {
        // Creating a list of products as an example
        var products = new List
        {
            new Product { Id = 1, Name = "Product A", Price = 10.99M },
            new Product { Id = 2, Name = "Product B", Price = 20.99M }
        };

        // Returning the View and passing the products as a model
        return View(products);
    }
}

Operation of SSR:

User accesses the website
       ¦
       V
+--------------------------+
¦ Request sent to the      ¦
¦      Web Server          ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server processes the     ¦
¦ request, fetches data    ¦
¦ (from a database or API) ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server generates a fully ¦
¦ rendered HTML page with  ¦
¦ dynamic content          ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server sends the full    ¦
¦ HTML page to the browser ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Browser displays the     ¦
¦ page immediately         ¦
+--------------------------+
       ¦
       V
User interacts with the page
(New requests go to the server)

Performance Comparison

Performance is one of the most critical factors when choosing between CSR and SSR. In CSR, after the initial load, navigation between pages can be very fast, as there is no need to reload the entire page. However, the initial loading time may be longer, as the browser needs to download and execute JavaScript before rendering any content. This can result in an unsatisfactory user experience, especially on slow connections or on devices with limited hardware (ISKANDAR et al., 2020).

In SSR, the initial loading time tends to be faster because the HTML is sent ready to be displayed. However, navigation between pages may be slower, as each interaction generally results in a new request to the server. This can affect the fluidity of the user experience, especially in applications that require constant interactivity.

User Experience

User experience (UX) also varies between CSR and SSR. CSR can provide a smoother and more interactive experience after the initial load, allowing for seamless transitions and content updates without reloading the page. This is especially beneficial in applications that require constant interaction, such as social networks or collaborative applications.

On the other hand, SSR can offer a better initial experience, especially on slow connections, as the user can view the content more quickly. However, if the application heavily relies on dynamic interactions, UX may be compromised by the latency of requests to the server. Thus, the choice between CSR and SSR should take into account the user's profile and the nature of the application.

Usage Scenarios

The choice between CSR and SSR often depends on the type of application and project requirements. Applications that require intense interactivity, such as gaming platforms or dynamic user interfaces, may benefit more from CSR. On the other hand, websites that prioritize SEO and initial loading time, such as blogs or product pages, may perform better with SSR.

An example of an application that benefits from Server-Side Rendering (SSR) is the website of Leaders Tec Br (https://leaders.tec.br), which needs its content to be indexed correctly by search engines. In this context, the ability to render content on the server before sending it to the client is crucial to ensure that search engine crawlers can access and index the content efficiently.

Hybrid Alternatives

A growing approach is the use of a hybrid solution that combines the benefits of CSR and SSR (THAKKAR, 2020). Frameworks like Next.js and Nuxt.js allow developers to initially render pages on the server and then use CSR for subsequent interactions. This provides a fast initial loading experience along with the fluidity of interactions that CSR offers.

This combination can be ideal for applications that need to meet different requirements, such as SEO, performance, and interactivity. By adopting a hybrid approach, developers can ensure that applications are optimized for a variety of scenarios and user profiles.

Conclusion

The choice between Client-Side Rendering and Server-Side Rendering is complex and should be made based on the specific needs of the project. Both methods have their advantages and disadvantages in terms of performance and user experience. Understanding the differences and impacts of each approach is fundamental to developing efficient web applications that meet user demands. It is also important to consider factors such as SEO, security, and scalability when making this decision.

The ideal scenario is to evaluate the context of the application and, if necessary, even consider a hybrid approach that combines the strengths of CSR and SSR. With the constant evolution of web technologies, new solutions and approaches may emerge, making the discussion about CSR and SSR even more relevant for developers and software architects.