What is Server-Side Rendering in Next.js?

What is Server-side rendering in Next.js?
The first thing that comes to our mind, what is server-side rendering? What does it mean?
The server-side rendering means server prepares all the content of the web page. The client's only responsibility is to show the content on the web page.
To understand it better, let's create a react app.

npx create-react-app my-app 
cd my-app 
npm start

Open the app in a browser. Right-click and View Source Page.

We can see the basic HTML with react entry point. In React, all the page rendering happens at the client-side. But, why it's an issue? What's the problem if the "View source page" is empty (or not containing enough data)? React is still loading the server data on the client. Right?

If a user wants to make an SEO-friendly app, then it's a big issue. The visiting search engine crawlers don't find any relevant content results in impacts the page ranking.

That's where Server-side rendering helps. In Next.js, pre-renders the page on the server-side and, the client shows that page to the users. In this case, when crawlers visit the page, they can find the data on the page and improves the SEO of the app.

Next.js has inbuilt functionality to pre-render the React pages and Components without using any third-party plugins.

Though we can do it on the React itself it is a bit trickier to set it up. In Next.js it is in its blood.