Is server-side rendering really faster?

Server-side rendering(SSR) can't be the silver bullet

Server-side rendering definitely has many advantages. However, it should be used carefully as there are pros and cons depending on the situation, and there are also frequent cases where CSR is better in terms of development cost or performance. In this post, I will briefly compare and summarise SSR and CSR, and then discuss whether server-side rendering really brings fast loading or not.

So what is server-side rendering?

SSR is a technique where web pages are generated on the server and sent to t. To be clear, SSR is what web used to be. Web pages used to be always populated from server side until client-side rendering(CSR) become a trend. This means that the initial render of the page is done on the server, rather than in the client's browser. SSR can improve SEO, page load times, and the user experience on slower devices or networks. However, it can be more complex to set up and maintain compared to client-side rendering (CSR), and may not be necessary or beneficial for all types of web applications.

Yes, clearly one of SSR's advantages is performance. But really? Let's compare SSR and CSR first.

Serverside rendering vs client side rendering

Server-side rendering (SSR):

• Generates HTML on the server and sends it to the client
• Improves SEO and initial page load time
• Provides a better user experience on slower devices or networks
• Can be more complex to set up and maintain

Client-side rendering (CSR):

• Generates HTML in the client's browser using JavaScript
• Provides a faster and more interactive experience after the initial load
• Simplifies the development process and enables faster iteration
• May not be as SEO-friendly or performant on slower devices or networks

Now, let's talk about the performance

I can agree the above mentioned features except the performance part.

CSR was initially introduced for better user experience including performance. With CSR + Single Page Application (SPA) users can use web like application and this combination is improving every day. Once JS bundles are cached on client side, it will just send ajax request to server to retrieve required data only. This will reduce the workload on the server-side as well, which means with the same resource (same computing power) CSR should be faster as it uses client side resources.

Then why millions of people say SSR is faster? Actually it can feel faster because when the contents are loaded, it will show completed page at one once, compared to CSR that loads contents later with following ajax requests. Hence from the user perspective, they may feel SSR is faster.

However that doesn't really mean SSR is faster than CSR, especially when there are a lot of requests, serving SSR pages can be a huge issue compared to CSR served by CDN.

Having said that, SSR can be still faster if you have enough server resources.

So, basically SSR may appear to have significant drawbacks that could slow down loading times, but it can still be faster due to reduced requests and round trip times. For example CSR apps will normally follow these steps below to show contents.

• Client requests HTML
• Server responses HTML
• Client requests JS bundle files to server
• Server responses with JS
• After that, client evaluates javascript and start application
• Client requests contents from server
• Server responses contents
• Now finally, the user sees the contents
  

These steps can be different depending on the application's architecture. But the main point is every request incurs a delay.

On the other hand, SSR has a lot fewer steps as below

• Client requests HTML
• Front end server receive the request and send API call to API server
• API server responses
• Front-end server populate. Physically close.

Considering the close proximity of front-end server and API server, each request time itself will be even shorter.

Hang on, what about the server cost then? Yes, that is something we might have to flexibly decide depending on the situations. SSR CAN BE faster if you have additional settings like auto scaling or some strategy to handle the requests

It is worth noting that SSR doesn't have to render all content. For instance, modals or other content that users don't need to see initially don't require SSR. Rendering all content via SSR can significantly increase loading times.

To conclude, SSR is not always the answer. Modern search engines can retrieve information from CSR pages effectively, making SSR less important for small projects or SaaS applications, and proper SSR comes with increased development time and extra server costs. But again, it is true that SSR can increase the performance itself. So, yes. SSR is faster than CSR : )