Does choosing between Client-Side Rendering and Server-Side Rendering matter?
As developers, we are frequently confronted with decisions that have far-reaching implications for the architecture of our apps. Where to implement logic and rendering in a web application is one of the most important considerations web developers must make. Because there are so many various ways to construct a website, this can be tough.
Here, we are going to understand about CSR and SSR so that, you can reconsider which is best for your website.
Previously, all websites and web applications had to follow the same strategy. They prepared the HTML content to be transmitted to browsers on the server-side, and the content was then rendered as HTML on the browser with CSS-based styling. With the introduction of JavaScript frameworks, an entirely new approach to web development emerged. JavaScript frameworks allowed the server to be relieved of some of its responsibilities.
With the help of JavaScript frameworks, it's now possible to render dynamic content directly from the browser by only requesting what's needed. In this case, the server just serves the base HTML wrapper that is required. The visitors will have a smooth user experience as a result of the transition because the web page loads quickly. Furthermore, the web page does not reload once it has been loaded.
What's the difference in rendering?
Client side rendering -- user requests a website -> server sends HTML file with JavaScript link -> Browser downloads HTML ->
Browser downloads CSS and JavaScript -> Browser executes framework / library -> browser loads the website.
Server side rendering -- user requests a website -> server sends ready HTML files -> Browser renders HTML but it's not interactive
Browser downloads JS -> Browser executes JS -> Website is fully interactive.
# angular Universal can be used for angular SSR
# next.js is a framework used for SSR with react
# nuxt.js is a framework used for SSR with Vue
There are different factors to be considered while opting between these two:
- SEO
- Load time
- Time of appearance over first user interaction
- Complexity of UI
How these affects SEO?
What is SEO?
SEO (Search Engine Optimisation) - is a technique that includes various methods to improve the visibility of a website in organic search results.
Better search engine optimisation is the advantage of server-side rendering while SEO isn't ideal for sites with CSR.
For server-side rendering, the server responds by sending pre-rendered HTML. The search engine can crawl and index it immediately since all the HTML content will be present in the source code. Server-side rendering can speed up the page load time which helps the site rank better in Google search results.
For client-side rendering, the search engine bots are unable to fully crawl the sites because the content is not assembled until it reaches the client's browsers.
Would you prefer for fastest appearance or interaction?
In SSR initial loading is faster while re-rendering of the application can be slower when it needs some interactivity meanwhile,
in CSR initial loading may take time but renders faster after initial loading.
Although the site will not be interactive until the JS files have been downloaded, the user will be able to see the information almost instantly. If a website has little interactivity and is primarily static, this is advantageous because it appears to load faster to the user than client-side rendering.
Pros and Cons of SSR
+ Enables pages to load faster which improves user experience.
+ Improved SEO
+ Ideal for sites which serves only static content
+ Less / no JS dependency
+ Optimal when user has slow internet connection
- Bottlenecking is one of the disadvantages of SSR. When the server has a lot of visitors or the site is large, it can create substantial slowdowns while the page gets rendered.
- reloads entire page upon every single navigation
- Server costs will be high to provide higher performance
Pros and Cons of CSR
+ Renders faster after initial page load
+ Places lesser load on server
+ Rich site interaction
+ Offers quick navigation in the website
- Slower initial page load
- hinders SEO if it's not properly implemented
- Relies on external libraries and framework
Conclusion
CSR is used for web apps with compound UI design and aims for a large number of users. SSR is used for web apps with simple UI design and designed for a small number of users.
Choosing between CSR and SSR depends on how a developer wants to provide a website's UX to users. Various factors mentioned above can be considered while making the decision.
And yes!, there also exists some frameworks which include the advantages of both CSR and SSR, Ex: GatsbyJS.
Interested in exploring with us ?
We are always looking out for top engineering talent across all roles for our tech team. If challenging problems that drive big impact enthral you, do reach out to us at careers.india@halodoc.com
About Halodoc
Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek and many more. We recently closed our Series C round and In total have raised around USD$180 million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.