We’ve all experienced this before, reading something online and there are so many terminologies that we need to Google it to know what it means. In this article, we will talk about a few terminologies that are commonly used when we talk about rendering for websites and web apps.
CSR(Client Side Rendering)
As the name suggests, CSR lets the browser handle all processes of rendering data. When a user browses a website, the HTML file requested from the server for the first time contains no content. The server doesn’t send data into HTML, but it will use loaded bundles, such as Javascript files, and let Javascript files execute AJAX and request data from the server, then render data to our browser. Because the bundle needs to contain the code of the calling API, the loading time is relatively longer. After loading the files, it also needs to call API, which is a period of time cost.
But CSR is not without advantages, because the bundle is loaded at the beginning, and the subsequent rendering screen does not need to interact with the server-side constantly. It will be fast after the initial load, and the user experience when browsing different pages will be very smooth and seamless. Using CSR will also have a smaller burden on the server.
SSR(Server Side Rendering)
Traditional SSR applications such as PHP process data through the server side, and then directly compile it into an HTML file. The user sees the complete HTML containing the data. But this traditional method has its disadvantages. When switching pages, the screen of the browser flickers, I’m sure we all have that feeling of why is it taking so long to load, is my internet slow? This could potentially give a bad user experience (UX) if for some reason it is actually taking too much time to load. SSR also requires a server to process user requests all the time, generate HTML with data, and send it to the browser, which could be a burden for the server depending on the application.
There are always advantages and disadvantages to each type of rendering. For example, the loading between pages, will not affect Single Page Applications (SPA). SPA is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app. And since the initial load is faster than CSR, the HTML received from the server can be quickly parsed by the browser and displayed immediately, and does not require a separate JS bundle to be downloaded and executed to display the webpage.
The second advantage of SSR is SEO. Depending on the type of application you are working with, SEO of a website could be essential for your business, and since the HTML is fully formed on the server-side and web crawlers are more easily able to index the HTML pages.
SSG(Static Side Generation)
This brings us to the next term. SSG means that all content is packaged into a file when building, so users can get all the HTML files when browsing the website. Imagine CSR but with some advantages of SSR such as SEO. Commonly used with React and Vue, and allow us to pre-render the HTML of the web apps by running then on the server-side at “build” time.
This is very suitable for websites with small data changes, such as blogs and product introduction pages. However, when using SSG technology, in addition to the frequency of updating page information, it is also necessary to measure that as the application becomes more prominent, the packaging time will also increase.