Menu
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?
213
Next. js does not work without server-side rendering (SSR) by default.
Next. js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.
Though it's been around for a while and has faded into the backdrop of discussion, server-side rendering isn't dead. It's still very powerful. Single-page applications have a place too, but they don't belong everywhere. If you've never built a server-side rendering application, I encourage you to give it a try.
Pages on which the data have to change for a particular type of request, those pages use SSR as data is not the same for every request and may vary with it. To use SSR for a page, we need to export an async function called “getServerSideProps“. This async function is called each time a request is made for the 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 protected]</NoSsr> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
