Okay, so we have learned some HTML & CSS and Javascript and learned React to build some frontend applications. After, connecting them to the backend and deploying those services to the real environment, we get feedbacks from the users: “The application seems to be a little slow!” or “I do not like the blank page showing up when I click different pages.” Basically in one word, we have to think about UX and performance of our application. There are many ways to boost up the performance from changing the request protocols to refactoring the backends, but in this article, we will explore the frontend part, specifically in rendering part.
Introduction
In a communication between a client and a server, the process of web-server returning the HTML is summarized as the following:
Returning Static Page → DB&API connection→ Returning Dynamic Page
Let’s explore some terminologies here.
1. Static Page = HTML / CSS / JS webpage
2. Dynamic Page = Static Page + Business Logic code from server
Basically in simple words, while static page involves a simple static page, dynamic page includes interactions of the users and interactive features dealing AJAX request in real time. Therefore, for a website that returns static pages, when a user clicks or sends a request, it will cause the service to show blank page for a short instance and the server returns static page in response to the request. This kind of application is called MPA(Multiple Page Application).
In contrast, React or Vue used web pages are built upon a theme of SPA(Single Page Application.) Instead of receiving different pages per request, in a single page, it moves into different pages and displays the pages. Before deep diving into CSR and SSR, let’s explore these two in details.
MPA vs SPA
MPA is composed of multiple pages and returns specific page upon a request whereas SPA is composed of a single page and renders different components upon request.
Then what are CSR and SSR?
Simple! It is to whether you will render a HTML rendering in client side or server side. As explored before, MPA and SPA concepts reveal which rendering strategies that they take. MPA is the SSR and SPA is the CSR.
In MPA, the server already has all the hard coded static pages. Upon a specific request, the server returns a corresponding page with the request. This is possible because the rendering is already done on the server side and the client side will display that page.
In SPA, the initial request will return a HTML document and it is empty. With having this empty HTML document, the client sends a request to the server and the server returns files that are required for client side rendering such as javascript files. Then the browser, instead of rendering complete new pages, just plugs in the received js files and data to the current HTML.
As you may have noticed already, SPA came later than MPA. There are many reasons behind but one of the primary reasons is that mobile era has risen recently and in order to optimize smart phone environment with less performance than PC environment resulted in a web service with SPA for the better user experience. (Imagine with mobile phones, for every request, the user has to wait for each page to be returned?)
CSR vs SSR
SSR(Server Side Rendering)
The traditional way of SSR is not too difficult and actually is common. Before SPA came in actions, most of the websites were run with MPA strategies and we have experienced. The basic cycle of SSr is in the following image.
The server returns a requested HTML file with rendered(ready to be rendered) in the first step of the above picture. Because of this reason, the loading time is relatively shorter.
The benefits of SSR are the following:
- Initial page loading is short compared to that of the CSR(However as shown in the second step of the picture, the browser downloads the JS and execute react to make the page interactable which means loaded page, at first, is not interactive)
- Already rendered HTML documentation is delivered for SEO
- The user information is managed from the server side so has more security levels
In opposition, every request will need a new rendered page from the server so may have bad impacts on UX/UI. Also, server rendering infers that more workloads on server.
CSR(Client Side Rendering)
From a single page, how can we view multiple pages? This means that we will have to use Javascript to change parts or all of the single page. Think about components and how with certain conditionals, we render different components. Also, with react library called react-router, we are able to move to different url with different components allowing us to do CSR. Ultimately, all these files including react-router are jsx or js files and are bundled into a single or multiple huge chunks js files through webpack. In SPA, the browser loads this huge bundled file.
What does it mean? The user cannot see the page until the browser finishes this huge bundled file in CSR. Technically speaking, the browser already loads the HTML because it is returned from the server but that HTML is empty. After the browser loads chunk JS file, then that HTML file is filled with contents through js files.
The benefits of CSR are the following:
- Excluding the initial page loading, it generally reflects very fast user interactions because already downloaded huge bundled js file includes all the logics required for rendering.
- Thus, no blank page occurs which boosts up the UX
- Sever does not need to care about what happens in the View(client side)
Which is better?
To be honest, this depends on services that you are creating. If I am working on some toy projects that have purpose on self-learning about the frameworks, any of these rendering strategies will be fine. Actually, in those cases, choosing rendering strategies becomes meaningless.
If you are building a blog website that requires more exposure on SEO, you want to consider SSR because exposure to the users on search engine is critical. On the other side, if you are building a website that shows feed of SNS, you want to take CSR since fetching and replacing the data in a single page is critical.
The Answer
What if we can build a website that initially, the server returns already rendered page for SEO, and after that, taking the CSR strategy for better user experience?
There are many frameworks for answering this question. For React, it is Next.js / Gatsby.js and for Vue, it is Nuxt. These frameworks support SSR in SPA.
With SSR in SPA, the initial page loading is done by SSR so that the browser receives viewable page a lot faster than that of the CSR with SEO available. After that, for each request, if we take the CSR strategy with already bundled chunk JS file, we can have both excellent UX with SEO, making our service faster with better exposure to the users.
I will soon post how to actually implement the SSR with Next JS so stay tuned!
