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?
In SSR, all page resources are rendered on the server rather than the browser. The server sends fully rendered HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and Javascript to the client when a request is made. SSR is very popular among React and Angular frameworks as they provide some pretty neat integration methods.
How does SSR work?
For a better understanding, let us dive deeper into how SSR works:
- The user requests for a web page (via a browser).
- The browser then connects to the server, which already has the pre-rendered HTML and CSS code for the page.
- The HTML and CSS are displayed on the user’s browser, but the page is not yet interactive.
- The browser then downloads the Javascript of the page, which is readily available on the server.
- The user can now view the page and interact with the elements.
- The browser executes the Javascript (DOM, or Document Object Model, is fully rendered).
- The page is now fully loaded and can respond to the interactions made by the user.
Advantages of server-side rendering (SSR)
- Faster initial page load time – This provides a good user experience.
- Better SEO – Due to the faster initial load time, search engine bots can crawl and index pages better.
- Optimal for users with a slow internet connection – They can see the rendered HTML while the JS is processing.
- Excellent Social Media Optimization (SMO) – Whenever you copy a page link and send it to others or post it on social media, a nice preview will show up with the page title, description, and image.
Disadvantages of server-side rendering (SSR)
- High server load – The browser keeps sending requests to the server as all page resources are located on the server.
- Time consuming – Rendering big applications on the server can be time-consuming.
- Less interactive – While the page is visible to users, they cannot interact with it.
- Slow TTFB (Time to first byte) – this happens because the server requires time to process the rendered HTML to respond to the first request.
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:
- The user requests for a web page (via a browser).
- The server/CDN (Content Delivery Network) responds to the request with a an HTML page that contains links to essential Javascript files.
- The page is not visible to the user and only a page with a loading sign can be seen.
- The browser downloads the Javascript through the links in the HTML.
- The Javascript is then executed through the framework. The user can only see placeholders at this stage.
- The final request is sent to the server for the final render.
- 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.
Here are some important things to consider when making a decision
-
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.
What does Google say?
Google has had its issues with Javascript, which now, according to Google, seem to be resolved. In Google IO 2019, Google had announced that the best solution for rendering is SSR with hydration.
You can read more about it here.
Conclusion
The SSR technique has a slight edge as compared to CSR. SSR is a traditional rendering method and the most reliable one. You can’t go too wrong with this approach.
In comparison, CSR is a new method of rendering brought to the limelight due to some crazy framework integrations in Angular and React JS. It’s great for newly developed web applications. The problem, however, is that, if not implemented correctly, CSR can hamper user experience to a great extent. So, SSR or CSR? We’ll let you decide.
We hope this article helped you understand the basics of SSR and CSR. Let us know in the comments section which approach would you take for rendering your website and why you opted for it.
Popular Searches
SEO Company | Internet Marketing Services | SEO Services | Ecommerce SEO Firm | SEO Audit Services | Google Penalty Recovery Services | Local SEO Services | PPC Services | ASO Services | Content Marketing Services | Google Reverse Image Search | History of Google | What is Digital Marketing | Hreflang | What is Local SEO | List of HTTP Status Codes | Google Discover | What is SEO | What is Google Search Console | What is Featured Snippet
