Client Side Rendering CSR, Server Side Rendering SSR and Static Site Generation SSG are the techniques which are used to render web pages on the browser.

Client Side Rendering (CSR)

• When a user requests a page, the browser downloads a minimal HTML file and a JavaScript bundle.
• The responsibility for rendering web pages is handed over to the browser's JavaScript engine.
• API calls are made directly from the user's browser, and page updates.
• All processing like rendering and data manipulation, occurs on the client side, utilizing the user's device resources, such as the CPU.
• Initial page loading speed may be slower compared to other rendering approaches.

Server Side Rendering (SSR)

• When a user requests a page, the server dynamically generates the HTML content for that specific request and sends it to the client.
• SSR improves the initial performance of a website, as the server sends pre rendered HTML content to the client, reducing the need for additional client side processing.
• SSR is beneficial for SEO optimization, as search engines receive fully rendered HTML content.
• It does increase server load, as the server needs to generate HTML dynamically for each request,

Static Site Generation (SSG)

• During the build process all pages are pre-rendered and the generated HTML pages are stored on the server.
• When a user requests a page, the server serves the pre rendered HTML page, resulting in fast and efficient page loads.
• SSG is well suited for content heavy websites where the content does not change dynamically or in real-time. It is not suitable for highly dynamic and websites which requires real time updates.

How to choose accurate rendering techniques

• CSR: for client heavy and dynamic application

• SSR: where SEO is priority

• SSG: where web pages are less dynamic