Do Client Components Render During SSR?

Q: Do client components render during SSR?

A: They say that there are two hard problems in Computer Science; cache invalidation and naming. "Client" components are an example of how a really poorly chosen name can cause a lot of troubles. When you specify that a React component in an App Router based application is a client component by putting "use client"; at the top of the file, that component will render on both the client and the server. Maybe hybrid components would have been a better name?

I'm a huge fan of folks trying these things out themselves to verify that what I'm saying is true. The way that you can do that is to create two components, one React Server Component (the default) and one "client" component, then add console.log statement to both and see where you see those logs. With the React Server Component (RSC) you will only see the log on the server. And with the "client" component you will see it on both.

When you add the logs to client components be sure to restart your server before you make your test. Client components are memo'ed automatically by the App Router. So unless their properties change they will not re-render and that may trick you into thinking that client components don't render on the server. They really do.

It's worth noting that the Pages Router was all "client" components. Components would be run first on the server to generate the HTML that is sent back during server side rendering, then again on the client during client-side "hydration".

As with the pages router all of the standard Server Side Rendering rules apply to "client" components. You can't use globals like window or document without adding code to check if your component is currently running on the client. And hooks like useEffect or useLayoutEffect will only run on the client.

With the App Router you should try to use as many React Server Components as you can as deep in the tree as you can. This is because server component code is not sent to the client and they are faster to hydrate on the client because they are not run on the client.