Revision history [back]

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.