Do you recall when the majority of web pages merely displayed static content?
When online pages were just simple web pages with little or no way to interact with them?
Hosting such websites back then had only one goal: to provide information about a firm and its products while also generating sales leads.
As a result, the only way to get your HTML onto a screen was through server-side rendering. It was the sole option to upload your HTML to a server, which subsequently converted it into meaningful documents for your users.
Now fast forward to the present day. The situation has radically changed. Most websites nowadays are much more than just static pages with content. In actuality, they're nothing more than web pages disguised as applications. You may send messages, update information on the internet, shop, and much more. As a result, server-side rendering is gradually fading away, giving way to the ever-increasing technology of rendering web pages on the client side.
Lets start with basics -
What is Server-Side Rendering
When a user requests a web page, the server produces an HTML page by retrieving user-specific data and sending it to the user's machine via the internet through server-side rendering. The content is subsequently decoded by the browser, and the page is shown. The entire process of retrieving data from the database, generating an HTML page, and transferring it to the client takes milliseconds.
Assume a user clicks a link on the website, the browser sends a request to the server, and the server handles the rest of the process. This operation not only puts more strain on the server, but it also wastes internet bandwidth.
What is Client-Side Rendering
Client-side rendering is a very recent technique to website rendering, and it didn't gain traction until JavaScript libraries began to support it.
When we talk about client-side rendering, we're talking about using JavaScript to render content in the browser. Rather than acquiring all of the content from the HTML document, a bare-bones HTML document with a JavaScript file in the initial loading is received, which renders the rest of the site using the browser.
The initial page load is naturally delayed when using client-side rendering. After that, each subsequent page load is lightning fast. Communication with the server is limited to retrieving run-time data in this approach. Furthermore, there is no need to reload the entire UI after each server call. By re-rendering only that single DOM element, the client-side framework is able to refresh the UI with changed data.
Today, Angular and React.js are some of the best examples of libraries used in client-side rendering.
Server-Side Pros
- For better SEO, search engines might crawl the site.
- The page loads faster at first.
- It's ideal for static websites.
Server-Side Cons
- Requests to the server are frequent.
- Overall, the page rendering is slow.
- The entire page reloads.
- Interactions between non-rich sites.
Client-Side Pros
- Interactions on the web are plentiful.
- After the initial load, the web page renders quickly.
- Excellent for web-based apps.
- A large number of JavaScript libraries are available.
Client-Side Cons
- If not done appropriately, SEO will suffer.
- It's possible that the initial load will take longer.
- In most circumstances, an external library is required.
Let's look at some ideal scenarios for their execution now that you know the benefits and drawbacks of each strategy.
When to use Server-Side Rendering
- The user interface of an application is very simple, with few pages and functionalities.
- There is less dynamic data in an application.
- The site's preference for reading is greater than its favour for writing.
- The emphasis is not on the rich site, and there are few users.
When to use Client-Side Rendering
- The user interface of an application is extremely complicated, with numerous pages and functionalities.
- An application with a vast and dynamic data set prefers writing to reading.
- The focus is on a rich site with a large number of users.
Conclusion
In a nutshell, server-side rendering is similar to receiving a pre-assembled toy train set, but client-side rendering is similar to receiving one that has been deconstructed and must be reassembled. You must choose whether you want to play with one that has already been assembled or one that you can put together yourself.