In Next.js it is very confusing topic for the beginner or intermediate level coders to understand the difference between server and client components. While it is true that official docs provide a clear distinction between them but it is not enough to grasp the topic efficiently. So, this article is for every coders who have been through this concept.

At first, we have to understand that what is Nextjs? Next.js is a web framework built on top of React.js library. And, React.js library is a library built on top of the JavaScript scripting language. While the core React.js library is primarily intended to create Single Page Application (SPA); means the whole codebase will be rendered to your browser or client side and then React DOM will take control of the entire application, and as a result you can’t find any page loading and it will be feeling like a native application. But, it has a small but effective problem which is hydration! Oops! What is hydration? Al right in web framework term hydration is referred to the process of mixing JavaScript with the actual website code while rendering to the browser.

Scrawlers only can read web pages which are Server Side, means while the page will load it will have all the necessary MetaData as well as JavaScript without AJAX behavior. In other word only Hydrated/SSR web pages can read Scrawlers.

In Single Page Application (SPA) hydration takes a bit time to process, so SEO scrawlers while try to access the SPA site for the better indexing it doesn’t find any metadata for the app so it never get indexed by scrawlers. So, coders around the world demand for a framework that will be a React.js app but as well as can be SSR or crawlers readable at the same time. For removing this problem Next.js emerged and evolving!