Since this process involves fetching and processing data on the client front, the process is called client-side rendering. After the server responds, the final content is rendered using DOM processing on the client browser.After the browser fetches the JS, it makes API requests via AJAX to fetch the dynamic content and processes it to render the final content.The browser downloads the HTML and then the JS, meanwhile the user sees a loading symbol.Instead of a Server, a CDN (Content Delivery Network) can be used to serve static HTML, CSS and supporting files to the user.The normal flow of web page rendering for a client-side rendering scenario follows the below steps: This approach is powered with JavaScript frameworks and libraries like ReactJS, VueJS, and Angular. In the CSR, the burden of compiling dynamic content and generate HTML for them is transferred to the client browser. What is client-side rendering (CSR)?Ĭlient-side rendering or CSR is a different approach to how the web page is processed for display on the browser.
Hence, server-side rendering increases the page load time compared to the page load time for a static site where there is no dynamic content to render. This responsibility of rendering the complete HTML in advance comes with a burden on memory and processing power on the Server. Hence, this process is called server-side rendering (SSR). In this process, all the burden of getting the dynamic content, converting it to HTML, and sending it to the browser remains on the server. The browser then downloads the Javascript (JS) and as it executes the JS, it makes the page interactive.The browser downloads the HTML and makes the site visible to the end-user.This compiled HTML is sent to the client’s browser for further rendering and display.The server checks the resource, compiles and prepares the HTML content after traversing through server-side scripts lying within the page.The user sends a request to a website (usually via a browser).As discussed above, the traditional way of rendering dynamic web content follows the below steps: Server-side rendering or SSR is the conventional way of rendering web pages on the browser. I will explain what they are, the major differences between each approach and suggest an approach for you. In this article, we will discuss these technically different approaches of web page rendering- client-side rendering and server-side rendering. Moreover, once loaded, the web page does not reload itself again. This transformation gave a seamless user experience to the visitors since there is very little time taken for loading the web page. The server, in this scenario, only served with the base HTML wrapper that was necessary. With the power of JavaScript frameworks, it became possible to render dynamic content right from the browser by requesting just for the content that is required. JavaScript frameworks brought in the possibility of shedding burden off the server. With the advent of JavaScript frameworks, came in a completely different approach to web development. They prepared the HTML content to be sent to the browsers at the server-side this content was then rendered as an HTML with CSS based styling on the browser. Earlier, the websites and web applications had a common strategy to follow. The discussion about a web page rendering has come to light only in recent years.
0 kommentar(er)
