Next js - disable server side rendering on some pages

clock icon

asked 3 months ago

message

1 Answers

eye

8 Views

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?

1 Answers

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@example.com</NoSsr>
 

Top Questions