Client Side Rendering VS Server Side Rendering

SSR vs CSR :-

Our browser only understands HTML, CSS, and JavaScript. All the code we write, all the frameworks, libraries, and everything else, are ultimately converted into HTML, CSS, and JavaScript because that is what our browser can understand.

Now, let's examine client-side rendering. When we deploy our website code, it is saved on a server. Whenever we request a web page, the server sends the entire code bundle, which includes HTML, CSS, and JavaScript.
This code bundle is then rendered in our own browser, and the page is shown to us. The gap between the request and the rendered page is a few milliseconds or sometimes even seconds. This delay is not great for SEO.

On the other hand, in Server Side Rendering, when we request a web page, the entire code is first rendered on the server, and then , only HTML and sometimes a few JavaScript codes are sent to our browser. This HTML code is instantly shown on our screen,eliminating the delay between the request and the rendered page.

What's cool with Next.js is that you choose which part of your app renders on the server side and which on the client side. By default, everything is server rendered.If you want something on the client side, just write "use client" at the top of that file.

Here's a quick breakdown of server and client-side components:
Server:

1. Fetching data
2. Accessing the backend
3. API access, etc.

Client:

1. In actions like onClick, onChange, useState, useReducer, useEffect.
2. Involves browser-only APIs, hooks, React class components.