1. Introduction
Hello guys, there are many rendering technologies in the world today such as: Server-side Rendering, Client-side Rendering, Pre-Rendering, Dynamic Rendering. Today, you and I will learn about Server-side Rendering and Client-side Rendering.
2. Concepts
Server-side Rendering:
Server-side Rendering is a way of rendering web applications on a server and then sending responses and content back to the user. This means that when a user opens a web application, a request is sent to the server that returns a response along with the content i.e. HTML, CSS, JavaScript and other content needed to render the page for the user. user. Here’s what will happen:
- User submits a request to a website
- The server inspects the resource, compiles, and prepares the HTML content after traversing the server-side scripts located in the page.
- This compiled HTML is sent to the client’s browser for rendering and rendering.
- The browser downloads the HTML and displays the web page to the user
- Then the browser downloads the Javascript (JS) and when it executes the JS it makes the page interactive
Client-side Rendering:
Client-side Rendering is a way of rendering web application content on the client (browser) side. That means when the user makes the initial request, the server returns a blank page or loading screen with some script. Here’s what will happen:
- The user submits a request to access web content on the browser.
- The server delivers static files (CSS and HTML) to the client’s browser upon the client’s first request to the web page.
- The client browser will download the HTML content first and then the JavaScript. These HTML files bind JavaScript.
- After the browser downloads the JavaScript, the content is dynamically generated on the client’s browser.
- Web content will be visible as customers navigate and interact with the website.
Advantages and disadvantages:
1. Server-side Rendering:
Advantages:
- Faster initial page load time
- Good for SEO
- Runs on most browsers, even disabling JavaScript works fine
Disadvantages:
- Frequent server requests: every user request must be sent back to the server for processing, which leads to performance issues.
- Slower overall load times
- Each time the user switches the page, the site has to reload many times
2. Client-side Rendering:
Advantages:
- The page only loads once
- Logic is transferred to the Client, so the Server is offloaded
- Reduce bandwidth
Disadvantages:
- Not SEO friendly
- Slower initial page load time.
- In most cases, an external library is required
Conclude:
Through this article, we hope that you will choose the most suitable option in your project.
Refer:
https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when