Hi Friends,
I just started a Next.js 13 project with the ChakraUI library. I noticed that I always need to use “use client” on top of the page because of the new features from Next.js. However I wonder if this is actually a good approach since I miss out on the SSR features from Next.js. Also I noticed that the images gets loaded a bit slower compared to the SSR approch from Next.js 12.
What do you think about that?
Thanks for answer! 
Interactive components that need client-side JS have to run on the client, there is nothing bad or unexpected about it.
It shouldn’t affect SSR.
Client Components enable you to add client-side interactivity to your application. In Next.js, they are pre-rendered on the server and hydrated on the client. You can think of Client Components as how components in the Pages Router have always worked.
React Server Components should not be conflated with the concept of server-side rendering (SSR). So-called Client Components are still server-rendered to HTML.
I think the main issue is the css-in-js some libraries use.
Thanks for your answer @lasjorg
I studied more about the new Next.js features and I think it could be indeed a serious issue for SEO when using Next.js together with ChakraUI as we need to declare “use client” on top of each page in order to use ChakraUI together with Next.js 13.
The use client directive in Next.js 13 tells the framework to skip server-side rendering for the component and instead render it on the client side. This means that the content of the component will not be included in the initial HTML sent from the server to the client.
Search engine crawlers primarily rely on the initial HTML to index a page’s content. Therefore, any content that is not included in the initial HTML might not be indexed by search engine crawlers. This could potentially impact the SEO of the website.
Since all my pages are created with ChakraUI, I always need to use “use client” on top of the pages and of course the important content for SEO is within these pages.
Now I am really afraid if I need to restructure the whole project in order to don’t have disadvantages for SEO. Actually this would mean that we should not use ChakraUI together with Next.js 13…
I hop it is not as bad as I think at the moment…
Hope someone could give me some more information about that and if it really effects the SEO in a bad way when all the content is within a client side component 
Thank you for answers!!
I still think you are conflating Server components with SSR. They are not the same. NextJS can still server render and hydrate on the client.
Anything that has user interactivity that requires JS must run on the client, this includes all event handlers, state/effects/custom hooks, and browser-only APIs. Basically, what you are left with for Server components is data fetching/backend access and dumb components.
The app router and React Server components are still very new and most projects are not and won’t be using it for some time. React Server components are in part being developed with the help of Vercel/NextJS and nobody is expected to make the change before it is ready, or do so in one fell swoop. It will happen incrementally over time (or not at all for some apps).
Large apps are not that easy to upgrade. For example, the freeCodeCamp client is still using React 16 as far as I know which should tell you something.
You may also want to read the NextJS SEO section
Hey!
React server components is a react specific feature, so using the “use client” only tells react that you’re going to write client (browser) specific code that should only be run on the client side.
SSR is a Next.js specific feature that allows you to render your react app on the server and turn in into HTML and hydrate on the client so whenever a user visits your webpage for the first time, it loads faster.
Even if you use client components Next will still use SSR so the SEO of your website would not be affected in any case.
Interesting observation! Using ‘use client’ in Next.js 13 for new features might impact SSR performance. It’s worth considering the trade-offs and testing both approaches to find the best balance between new features and SSR benefits. As for image loading, you might want to explore optimizations or consider sticking with the SSR approach from Next.js 12 if speed is a critical factor. Keep experimenting and find what works best for your project!
Yeah, that’s a valid concern with Next.js 13 and ChakraUI. Going full-on client-side with “use client” can definitely impact your SEO since search engines prefer server-side rendered content.