I was trying out the new features from Next.js 13 and I can't explain to myself, why Client Components still use SSR. I thought that using Client Components would result in Components that are only rendered on the client.

Can anyone explain, how that exactly works?

Thanks

CodePudding user response：

In Next.js, a "client component" refers to a component that is only rendered on the client-side, after the initial server-side rendering (SSR) of the page. This means that during the initial page load, the component will be rendered on the server and sent to the browser as part of the HTML. Then, after the JavaScript for the page has loaded, the component will be "hydrated" on the client, allowing it to take advantage of the full capabilities of the browser and potentially improve the user experience.

It's important to note that this hydration process is different from re-rendering the component, and it should be avoided if possible, as it can cause some performance issues.

It's possible that you're encountering some confusion due to the fact that the initial render of a client component will still happen on the server, as part of the SSR process. However, after that initial render, the component should only be updated and manipulated on the client side.