Server-side rendering was the popular way to render Web applications until JavaScript front-end libraries/frameworks such as React, Angular, Svelte, and vue.js emerged, making client-side rendering mainstream. Client side rendering (CSR) vs. Server side rendering (SSR)

What is client rendering?

Client-side Rendering (CSR). Client rendering is a way of rendering Web application content on a client (browser). This means that when the user makes the initial request, the server will return a blank page or loading screen with some script. And client-side rendering requires the user to enable JavaScript to see the page.

<html>
  <head>
    <! -- SEO/Metadata here -->
  </head>
  <body>
    <div>You need to enable JavaScript to run this app.</div>
    <div id="root"></div>
    <script>
      <! -- all of the JavaScript -->
    </script>
    <script src="/ static/js / 2.6158 a3d8. The chunk. Js." "></script>
    <script src="/static/js/main.ba831a9f.chunk.js"></script>
  </body>
</html>
Copy the code

After the script is fully loaded and compiled, the page renders. This may result in slower initial rendering times, but the benefit is that only the content needs to be transferred from the server to the client when another request is made to the server. This script will be responsible for rendering the response. This in turn makes all subsequent requests after the first request very fast. The main disadvantage of this approach is that scripts tend to grow as the application grows, which can degrade their performance when scaling.

What is server-side rendering?

SSR is a way of Rendering a Web application on a Server and then sending the response and content back to the user. This means that when a user opens a Web application, a request is sent to the server, and the server returns the response along with the content needed to display the page to the user, namely HTML, CSS, JavaScript, and other resources. Unlike the way the application is rendered by the client, pages with content are returned to the user. The downside of this approach is that it always makes a request to the server every time the user clicks on a link, which can be slow because the server must complete the process of processing the request and then return HTML, CSS, and JavaScript files. The solution of this approach is a mixture of SSR and CSR, which is called Isomorphic app. In homogeneous applications, we can eliminate the slow initial load time of the client rendering application by rendering the initial HTML from the server and then having the client render the content, thus eliminating the frequent requests that SSR must make to the server.

The benefits of SSR

  • Faster initial load time: Because SSR only gets the user’s requested content when the initial request is made, and it doesn’t have to wait until all the JavaScript files are loaded. Time To First Byte is faster
  • Good for SEO: SSR applications are better than search engines (Baidu, Google, Bing, etc.) because search engine bots can crawl the entire application and index its pages instead of just loading and updating a single page application rendered by the client.
  • Great for static sites: SSR is great for static sites because the server returns full HTML to the user.

Note:

TTFB (Time To First Byte) is the sum of the Time from sending a page request To receiving the First Byte of response data, including the Time of DNS resolution, TCP connection, sending an HTTP request, and obtaining the First Byte of response message.