What is server-side rendering?
When you visit a fully server-side rendered website for the first time, what happens behinds the scenes? Initially, the browser makes a request to the server requesting the HTML file of the page. On the server, the HTML page gets fully rendered with its CSS and Javascript files before being returned to the browser.
Upon receiving the response from the server containing the fully-rendered HTML file, the file gets displayed on the browser and no further rendering is done on the browser-side. This process repeats itself every time the user visits another page(unless the user caches it), which results in frequent requests to the server, placing high load on it.
What is client-side rendering?
Client-side rendering is commonly used in Single-Page Applications(SPA), where pages are rendered "on-the-spot" and "on demand". Contrary to a server-side rendered page, when we visit a client-side rendered page, the server will only return a skeletal HTML file alongside a javascript file, which will be used to render the site on the browser. Therefore, the rendering of the web page is done on the browser instead of the server(hence the name client-side rendering).
When the user navigates to another page, no additional requests is made to the server, the javascript script file handles the dynamic rendering of the new page, which results in faster load times.
This approach is extremely useful for SPAs as it reduces the load time between pages, and also heavily reduces the load on the server by reducing the number of requests to the server.
Why do we still use server-side rendering then?
It is important as a front-end developer to understand the use cases of your application and adopting the relevant approach which suits the use case. While server-side rendering is overall slow and imposes a heavy load on the server, it is extremely useful for generating static sites.
An example of a use case for this is a website for a company who wishes to have their own individual URL/route for their product pages. An example of this is Quora.
This page is statically generated as you can tell from the URL:
https://www.quora.com/Why-do-Brits-speak-English-an-American-language-rather-than-speaking-some-European-language
A dynamically generated URL would look something like this:
https://www.quora.com/question/199381
The reason why Quora does this is to have its pages indexed on Google search, which is beneficial for its Search Engine Optimisation(SEO) to direct user traffic to their website.
Conclusion
There is no surefire way to judge both methods of rendering as both have comparative advantages depending on the use cases. For web applications that is primarily SPA or require heavy site interactions, client-side rendering is the way to go due to its faster overall load time and low load on the server.
For enterprise solutions which require statically generated pages and support for SEO, server-side rendering is the optimal solution, allowing search engines to crawl for better SEO and lower loading time when first visiting the individual static pages.
For developers, most modern frameworks tend to utilise client-side rendering as the default these days.
For server-side rendering support, a popular choice would be Next.JS(https://nextjs.org), a very useful framework enabling server-side rendering on React applications.