Server-Side Rendering vs Client-Side Rendering – Which one to choose?
Gone are the days when websites were only static pages displaying content. In today’s world, websites are much more robust and dynamic than ever before. In fact, with the introduction of Progressive Web App (PWA), the websites now look and feel like a mobile application. Also, with the growing importance of technical Search Engine Optimization (SEO), the need to create quick, responsive web pages is the need of the hour. This makes it very important to decide which web rendering technique to choose when creating your website. We have been introduced to various rendering techniques in the past, and each has had its pros and cons. In this article, we’ll talk about the two most streamlined rendering techniques: Server-side Rendering (SSR) and Client-side Rendering (CSR).
Server-Side Rendering (SSR)
What is SSR?
Server-Side Rendering (SSR) is a technique used in web development where the server generates the HTML for a web page and sends it to the client-side to display on the browser. The HTML is pre-rendered on the server-side, making it faster to load, better for SEO, and more efficient for slow internet connections. This process also helps to improve the overall user experience and reduces the time needed for the page to load. With SSR, the server sends the fully rendered HTML to the client, which then displays the page in the browser without waiting for JavaScript to execute.
How does SSR work?
For a better understanding, let us dive deeper into how SSR works:
1.The user requests for a web page (via a browser).
2.The browser then connects to the server, which already has the pre-rendered HTML and CSS code for the page.
3.The HTML and CSS are displayed on the user’s browser, but the page is not yet interactive.
4.The browser then downloads the Javascript of the page, which is readily available on the server.
5.The user can now view the page and interact with the elements.
6.The browser executes the Javascript (DOM, or Document Object Model, is fully rendered).
7.The page is now fully loaded and can respond to the interactions made by the user.
Advantages of server-side rendering (SSR)
Server-side rendering (SSR) has several advantages in web development.
•SSR allows for faster load times, as the server generates the HTML for a web page and sends it to the client side to display on the browser. This results in a smoother user experience and avoids the blank page flicker typical of client-side rendering (CSR).
•SSR provides better SEO performance, as search engines can easily crawl and index the content of the website. This can result in higher search engine rankings and more organic traffic.
•SSR is efficient for loading on slow internet connections and can handle large-scale applications without affecting performance.
•For Example – Walmart.com uses SSR for its pages, with the Electrode framework optimized for SSR performance when transforming the stack to React and Nodejs.
Disadvantages of server-side rendering (SSR)
•While there are some disadvantages to server-side rendering (SSR) Such as increased expenses and higher complexity in development and hosting, the advantages outweigh the drawbacks.
•SSR results in faster load times, better SEO performance, and more efficient loading for slow internet connections.
•SSR provides a smoother user experience, as the server generates the HTML for the web page and sends it to the client side, resulting in a faster display on the browser.
•For Example – Walmart.com, for instance, utilizes the Electrode framework optimized for SSR performance when transforming the stack to React and Nodejs for its pages.
Client-Side Rendring (CSR)
What is CSR?
CSR is a technique where all the page resources are rendered on the client’s browser rather than the server. This is done using the Javascript framework that compiles and generates code at the browser end. CSR can be incorporated with the help of Javascript frameworks and libraries like Angular, VueJS, and React SSR.
How does CSR work?
Here’s a breakdown of how CSR rendering works:
1.The user requests for a web page (via a browser).
2.The server/CDN (Content Delivery Network) responds to the request with a an HTML page that contains links to essential Javascript files.
3.The page is not visible to the user and only a page with a loading sign can be seen.
4.The browser downloads the Javascript through the links in the HTML.
5.The Javascript is then executed through the framework. The user can only see placeholders at this stage.
6.The final request is sent to the server for the final render.
7.The user can now see and interact with the page.
Advantages of CSR
•Renders fast – The page renders quickly after the initial page load time.
•Offers quicker navigation of the website – This is possible because placeholders are loaded first.
•Puts less load on server – The Javascript is executed on the client’s browser, putting less load on the server.
•Works amazing with PWA (Progressive Web Apps) – Again, this is because the code can be entirely rendered on the browser.
•Is interactive – The rendered page is interactive.
Disadvantages of CSR
•Loads slowly – The HTML, CSS and Javascript have to be rendered first and then displayed to the user, increasing the time taken to load the initial page.
•Hampers SEO if not implemented correctly – This can increase your page speed and can be unresponsive for the user.
•Delays crawling and indexing – The search engine bot has to wait for all the page resources to load.
•Relies on external libraries – To achieve the best results, it has to be combined with external libraries and frameworks.
SSR or CSR – Which one is the best for me?
Both of these rendering techniques are robust and can enhance user experience if implemented correctly. The SSR and CSR approaches have their pros and cons. It all boils down to which rendering techniques suit the needs of your website. And the expertise you have with frameworks.
•Page Load Time
Page load time is an important metric, especially in the current SEO landscape. The faster your page loads, the better it is for users and search engine spiders. The initial page load time in SSR is faster than CSR. When compared, SSR loads 1-1.5 seconds faster than CSR. This is because, in SSR, the server responds by sending pre-rendered HTML, which can be viewed by the user. In CSR, on the other hand, the entire code (HTML, CSS and Javascript) needs to be rendered before the user can interact with it. Once the initial page loads, we see the SSR in all its glory.
•Caching
Caching is a technique where important, reusable scripts are stored in the client’s browser. This saves time as the cached scripts don’t need to be loaded again when a user revisits the website. This is mainly used in PWA. CSR practically wins this one, hands down. In CSR, once the page is loaded and executed, it does not need to make any requests to the server and almost works like a desktop application. In some scenarios (when the Javascript does not trigger API for calls to the server) it can also pretty much load without an Internet connection. In SSR, since the page resources lie on the server, the browser needs to send timely requests to the server.
•Search Engine Optimisation (SEO)
SEO is king in digital marketing. And in the race to capture the organic traffic, Javascript SEO is a technique you have to engage with. Javascript SEO, in simple terms, is the ability of ensuring that all your javascript content (.js) on the website is correctly loaded, rendered, indexed and displayed on the Google SERP. Rendering plays a vital role in this. Let’s cut to the chase, SSR is a friend of SEO. In SEO, the search engine spiders come to your website to crawl and index your metadata and content. When SSR is implemented, search engine spiders get the data they are looking for as the pre-rendered HTML is sent during the first request. However, in CSR, search engine spiders have to wait for the entire code (HTML, CSS and Javascript) to be rendered to start crawling the website.
Here are some important things to consider when making a decision