Is it possible to disable ssr on some pages using Next js? For example, I have a page with a product description on which I use ssr for SEO but I also have a page with a list of items or products which I can filter and for that page, I don't want to use ssr because this page generates dynamically every time, how can I disable ssr on this page?
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,
});