What is the method to only render components on the client side in NextJS 13?

edit

The method to only render components on the client side in NextJS 13 is to use dynamic imports with the ssr: false option.

Here's an example:

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'), {
  ssr: false,
});

function HomePage() {
  return (
    <div>
      <h1>Welcome to my NextJS app!</h1>
      <MyComponent />
    </div>
  );
}

export default HomePage;

In this example, the MyComponent is loaded dynamically, and the ssr: false option tells NextJS to only render it on the client side. This means that the component will not be included in the initial server-side rendering, but will instead be loaded and rendered on the client side after the page has loaded.