Next js - disable server side rendering on some pages

Lazy load the component and disable SSR: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'

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

export default () => <DynamicComponentWithNoSSR />

The dynamic() function can also be used without a dynamic import:

// components/NoSsr.jsx

import dynamic from 'next/dynamic'
import React from 'react'

const NoSsr = props => (
  <React.Fragment>{props.children}</React.Fragment>
)

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false
})

Anything wrapped in this component will not be visible in the SSR source. For example:

// inside the page you want to disable SSR for

import NoSsr from "components/NoSsr";

Contact me at <NoSsr>[email protected]</NoSsr>

Put this on your _app.tsx

import type { AppProps } from "next/app";
import dynamic from "next/dynamic";
import React from "react";

const App = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default dynamic(() => Promise.resolve(App), {
  ssr: false,
});

This is a late answer, but in case anyone runs into this:

const isServer = () => typeof window === `undefined`;

const Page = () => isServer() ? null : (

  <> 
      <YourClientSideComponent />
  </>
);

This is on the "page" level. isServer() prevents rendering of anything while on the server side. You could, if you wanted to, prevent ssr on the component level also:

const isServer = () => typeof window === `undefined`;

const Page = () =>(

  <> 
      { !isServer() && <YourClientSideComponent /> }
  </>
);