SSR vs SPA
Server Side Rendering vs Single Page Application
Last updated
Server Side Rendering vs Single Page Application
Last updated
Since the beginning of time, the usual method for getting HTML to the browser has been by using server-side rendering. It is called server-side rendering because most of the logic will be processed on the server.
Whenever you access a website, the browser will send a request to the web server, usually each request only takes a few milliseconds. But in reality, it depends a lot on factors such as: The speed of your internet connection, the location of the website's server, how many people are accessing it at the time you send the request, ... The Web server will receive the request, read data from the database (if necessary), the Web server will render the HTML, returning it to the browser to display to the user.
Some properties of the server side rendering mechanism:
Logic from simple (validation, reading data) to complex (decentralization, payment) is all on the server side.
The logic for routing - page switching lies on the server.
The logic for rendering - displaying the website is also located on the server.
At that time, just one framework like PHP's Laravel, Java's Spring MVC or Ruby's Rails is enough to handle everything. From the above mechanism, surely you have already realized the outstanding disadvantages of server-side rendering, right? Some of those disadvantages are:
The website must be completely reprocessed and reloaded from the beginning if there is only a small change in the content (For example, a title change...) causing discomfort.
Heavy on the server because the server has to handle a lot of logic and data.
Processing HTML content consumes server resources, causing delays when processing other requests.
The number of requests to the server is very high because every task has to be reprocessed on the server and re-rendered the HTML.
TTFB (Time To First Byte) is high due to the need to process on the server, which will affect some benchmark tools.
Despite such weaknesses, SSR has not been completely replaced yet because it has very big and important advantages:
Strongly supports SEO because Google Search engines can Crawler data better.
Loading the page for the first time will be very fast.
Would be great for static pages.
In the 2010s, with the development of JavaScript and AJAX, the client-side rendering mechanism began to be used, Client Side Rendering means that the rendering of HTML and CSS will be done on the client. Frontend and backend can be completely separated and work through what is called an API. API is the hinge to connect the backend (processing data and logic) with the front end (processing interface and effects). API is one of the cores of SPA applications, commonly there is RESTful API, and an emerging name is GraphQL (another battle, but I think the victory will definitely belong to GraphQL).
Compared to Server Side Rendering (SSR) mentioned above, Client Side Rendering (CSR) has the following characteristics:
Simple logic (validation, reading data, sorting, filtering) is on the client side
The logic for routing and rendering data is 96.69% on the client side.
Complex logic (payment, authorization) or a lot of processing (data processing, reporting) still resides on the server side.
When hearing about client-side rendering mechanism, everyone must have heard about Single Page Applications (SPA). Simply put, the SPA has a root page and in that root page, we can load many child pages (corresponding to the components of the root page) without any effect on the root page. SPA only loads the necessary part of the page, unlike a traditional web application (which reloads the entire page) when we interact with the website (such as performing navigation). In a SPA we only need to load the components common (of the original page) only once, these common elements (header, footer, menu...) often appear on many pages of the application. For example, when you are on the home page, there will be a header and footer as common elements. Now when I switch to the Introduction page, for example, I only reload the introduction content, while the header and footer remain the same. Some frameworks used to develop SPA such as: AngularJS, React, EmberJS, Vuejs...
Advantages of SPA:
Rendering html on the server is a concern if your website has many users, extremely consuming system resources. With SPA, this only happens the first time the user visits the home page, but after that the rendering will be done by the client. Imagine if a server has to render html for 1000 requests from the client, with SPA we let 1000 client machines do the work.
SPA separates the front-end and back-end. SPA communicates with the server mainly via JSON Rest API, helping to reduce data sent and returned between client and server to a minimum. Development and testing can also be independent between the front-end and back-end.
SPA is very fast because static resources such as HTML, CSS, and Script are only loaded once. During use, only data is transferred back and forth between the client and the server -> minimizing bandwidth for the server.
Increase user experience: As I said above, with traditional web applications, users often have to reload the entire page - which means a blank page appears before the download is completed, but with SPA, this is not the case. , users only have to reload what they need. Users can interact with SPA like a Desktop application.\
Although it overcomes all the disadvantages of web applications based on the server-side rendering mechanism, SPA cannot completely replace the web based on the SSR mechanism. Each has different strengths and weaknesses, and they all have different strengths and weaknesses. important. Disadvantages of SPA stand out as:
Users must allow Javascript to operate in the browser. Otherwise SPA will not work.
The browser will have to process a lot, so performance issues on mid-range phones and below are something you need to worry about.
Complexity: SPA development will be much more complicated than traditional web applications. Back-end developers need to know Javascript as well as know how to use one of the frameworks used to develop SPA (AngularJS, React, EmberJS, Vuejs...). And writing unit tests for Javascript is also more difficult, but today there are many frameworks that support this.
SEO is affected because web content is generated on the client, causing the Search engine crawler to not be able to access the content. Only recently has Google solved this problem, but even though Google holds the majority of the search market share, in different countries, it will have a certain influence.
