Next js - disable server side rendering on some pages
Reactjsnext.jsServer Side-RenderingReactjs Problem Overview
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?
Reactjs Solutions
Solution 1 - Reactjs
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 />
Solution 2 - Reactjs
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 protected]</NoSsr>
Solution 3 - Reactjs
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,
});
Solution 4 - Reactjs
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 /> }
</>
);
Solution 5 - Reactjs
Here's a solution that i just came up with based on the something mentioned in the React docs: https://reactjs.org/docs/react-dom.html#hydrate
class ClientOnly extends React.Component {
state = {
isClient: false,
};
componentDidMount() {
this.setState({
isClient: true,
});
}
render() {
const { isClient } = this.state;
const { children } = this.props;
return isClient ? children : false;
}
}
You can then wrap any component / block with this and it won't get rendered on the server. e.g.
<ClientOnly>You're logged in as {name}</ClientOnly>
This also prevents the following React.hydrate warning "Warning: Expected server HTML to contain a matching
Solution 6 - Reactjs
We can also use react-no-ssr React component.
Let's say Comments is our client only component. Now we need to render it only on the client. Here's how we do it.
import React from 'react';
import NoSSR from 'react-no-ssr';
import Comments from './comments.jsx';
const MyPage = () => (
<div>
<h2>My Blog Post</h2>
<hr />
<NoSSR>
<Comments />
</NoSSR>
</div>
);
Solution 7 - Reactjs
Another and I believe the simplest solution is to just use process.browser
, which will only be true when ran on client side.
<div>
{
process.browser && <Hidden />
}
</div>