Client-side rendering

Client-side rendering (CSR) is a JavaScript rendering technique where the final HTML content and user interface (UI) components are generated on the client's browser using JavaScript.

In the CSR approach:

1. The server sends an initial HTML file with minimal content

2. The client-side JavaScript code fetches data from the server

3. The JavaScript code renders the complete UI on the browser

Output of Client-side rendering

Advantages of client-side rendering

1. Provides faster website interactivity

2. Reduced server load

Disadvantages of client-side rendering

1. SEO limitations

2. Longer initial loading time

3. Caching is not possible until the page is fully loaded

Server-side rendering

SSR is the traditional method of rendering web pages

the server generates the complete HTML page with the rendered UI and sends it to the client's browser. The browser then displays the fully rendered page without running any client-side JavaScript code.

Output of Server-side rendering

Advantages of server-side rendering

1. Improves SEO

2. Faster loading times

3. Great for static websites

Disadvantages of server-side rendering

1. Increased server load

2. Delayed website interactivity