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:
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.
Contact me at <NoSsr>email@example.com</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,});