In simple words, we can say that rendering is something about displaying fetched content from the internet
When we open a website in a browser, the server sends some data to our machine. This data can be in multiple formats such as HTML, XML, JSON etc.
Here the HTML and XML data can be parsed by the browser to create a visual effect. Hence the browser parses the HTML response from the server and shows it on your screen.
Server-Side Rendering (SSR)
It is basically a process of rendering web pages on the server and sending fully-rendered HTML to the client. In this process, the server generates the HTML, including the dynamic data, and sends it to the client as the complete page. Then the client displays the page without any further processing. For example, Next.js, click on the next js for more info.
working of SSR
When a user requests a page, the server generates the HTML for that page, including all the dynamic data. The fully rendered HTML is then sent to the client, which can display the page without any further processing.
Use of SSR
SSR is commonly used for content-heavy websites, such as blogs, or news websites, where fast initial load times and good SEO optimization are important-
Client-Side Rendering (CSR)
It is a process of rendering web pages on the client side using Javascript. Here the server sends the initial HTML file, but then the client uses a Javascript file to dynamically update the pages as needed. This allows for more interactive and responsive web pages, as the client can update the specific parts of the page without needing to reload the entire page. For example, React.js, click on React.js for more info.
Working of CSR
When a user requests a page, the server sends the initial HTML file, along with any required javascript files. The client then uses the javascript file to update the page as needed, without needing to reload the entire page.
Use of CSR
It is commonly used for web applications that require a high degree of interactivity, such as social media platforms, and e-commerce websites.