Problem
Server component is not rendered in server side but is being rendered on client side. You can verify this by going to source tab in chrome developer tools.
In the source tab of debugging tools, we can see ServerComp.tsx file is visible. console.log() statement present in <ServerComp/> is printing in browser console which means the component is rendering in client side. So all the confidential information present in server component now can be seen seen by client and extra unnecessary JavaScript bundle is being shipped to client making the website slow, killing the purpose of using server components.
Proper way to use server component inside a client component in Next.js
Next.js, a popular React framework, helps to build powerful web applications with ease. One of its standout features is the ability to seamlessly integrate server-side logic alongside client-side components. This allows for dynamic content rendering, efficient data fetching, and enhanced user experiences. In this article, we’ll explore how to use server-side components within client-side components in Next.js applications.