Today we will talk about the main types of data rendering on websites.
Users always want to get some more, no one is interested in reading the content, everyone wants to interact with it, for example: mark it as liked, reply to comments, receive and send messages in real-time. That’s why the modern web is developing rapidly. A few years ago, If I wanted to go to the cinema, I was visiting its site which was loading very slowly due to a slow 3G connection. After loading I was afraid to tap something, to avoid going somewhere else accidentally because this would start the downloading again. I only needed the administrator's phone number. It was easier to make a call than wait for page loading.
Now, in the era of the fast Internet, users want to see the content in a few seconds after entering the site and most likely will leave the site and not return if that doesn’t happen. This is very important for the sites that offer their services or sell something.
Nowadays almost half of the websites are SPA or PWA and all of them are using two main methods of content rendering: CSR (client-side rendering) and SSR (server-side rendering).
How do CSR and SSR work?
In the case of CSR the user opens a web page, the browser requests the server, the server processes the request and generates a response, then returns it. After that, the browser receives an empty HTML document with links to JS scripts and starts loading them. In the third step, the browser starts parsing JS, and after that, we see our content and a working interface. And then it loads the necessary data from the API.
The main disadvantage is that while all these steps are being performed and before accessing the API, the user sees a white screen. This is very important for some systems.
CSR is used by Facebook, Gmail, Trello, etc.
Pros:
- fast rendering (after full loading of JS scripts);
- reducing the load on the server;
Cons:
- the user sees a white screen while the download is in progress (usually 2-3 seconds);
- SEO problems (not all search engines know how to work with client rendering);
In the case of SSR the user opens a web page, the browser requests the server (similar to CSR), but the server sends an already formed HTML page, completely ready for indexing by the search engine. The browser receives the response and immediately renders it for the user, and then loads the necessary JS scripts. After that, the browser collects HTML and JS so it is possible to interact with the page.
SSR is used by YouTube, Netflix, and Ubisoft.
Pros:
- search engines do not need to run JS scripts, they just read the meta tags, which guarantees excellent indexing;
- the user will see the content faster;
- no need to spend the resources of the user's device for rendering.
Cons:
- server bandwidth will decrease (content rendering will be added)
- The HTML document’s size will grow since it will store the data of the JS framework.
The image below shows the process of rendering content in a browser using CSR and SSR.
When is the best time to use CSR and SSR?
If you don't have a lot of dynamic content, then it is better to use CSR (dashboard, simple one-page sites). However, if there is some kind of dynamic logic, then it is better to use server-side rendering since the server has more processing power, a stable Internet connection and it is faster than the client's browser. Pulling content from the server will be faster than rendering on the client-side.
What technologies do you need to know to use SSR?
If you are developing SPA or PWA, then most likely you are already using one of the three most popular JS frameworks (Angular, Vue.js, React.js). To try using SSR, you can make your custom server on Node.js (Express) or use ready-made popular solutions, such as:
- Next.js for React
- Nuxt.js for Vue
- Angular has built-in functionality for SSR (see documentation).
So you don't need to learn something new to improve your system, you can start right now!
