We've looked at server components, that is components that render only on the server, and we've looked at client components or use client components and we know that they render on the server and then hydrate on the client. But what about client only components? Components that we only want to render on the client. Here is a simple example to demonstrate. We have this window width component that we are going to create. And because we want this to be a client component, we are going to start with use client. And then within the component we are going to log whenever it is rendering and this component is going to display the current window in width.

With this component created, let's import it into a simple page component and render it out. Now when we jump to the browser, you might think that it is working perfectly fine, but if you look at the browser logs, you can see that the server originally returned a 500 error response. And we can see this error on the server terminal as well. The window width component was rendered on the server as shown by the log. And additionally, because a window is not defined in a server environment, the server actually errored out and we can see the error 500 on the terminal as well. Rendering components only on the client browser is not

something that you should aspire to do with next phase, but it does provide a simple way to achieve this. Now, to achieve true client only rendering, we cannot import the component directly into a server environment. Next JS provides a utility called dynamic, which we can bring in from next slash dynamic, and this is what we can use to dynamically import the component only on the client. The key thing to note over here is that when we are importing the component, we are marking it as SSR fault. So server side rendering for this particular import should not happen. And with this workaround in place when we jump into the

browser, you will see no errors on the browser console. And additionally, if you look at the server terminal, we will notice that the component is not rendered on the server at all. As you would expect, client only components are also transitive, so anything you render from a client only component is also going to be rendered only on the client. And in fact, the whole JavaScript module is going to be client only. Let's demonstrate that and a few other things that you should be aware of when working with client only components. Imagine you have a client only component and we want this component to be completely unaware of the fact that it is being rendered within.

Next, yes, so we don't use the use client directive. Also, we are going to log whenever this particular module is going to be executed. And then within the component we also log out when it is rendered. The component itself is going to be a simple diviv and we are going to use on click simply to demonstrate the fact that this is going to use client only features. Now, we cannot actually use this component directly within Next JS for two reasons. First, it is missing the use client directive, and secondly, in order to use components dynamically with Next Dynamic, it must be a default export.

Since over here we are using a named export, it'll not work nicely with Next Dynamic. We can actually fix both of these issues by creating a new client only route. We start off this file With the use client directive, we bring in unnamed export and then re-export it as a default export. With these two simple changes in place, when we want to use this component within standard Next js, we bring in the dynamic module and use it to wrap up the client only route. If we jump in the browser, you will see that the module has executed on the client

and the component rendering has taken place on the client. But when we look at the server logs, there is nothing there because the module execution and the client rendering is only happening within the browser.