Next js - отключить рендеринг на некоторых страницах на стороне сервера

Question

Можно ли отключить ssr на некоторых страницах, используя Next js? Например, у меня есть страница с описанием продукта, на которой я использую ssr для SEO, но у меня также есть страница со списком товаров или продуктов, которые я могу отфильтровать, и для этой страницы я не хочу использовать ssr, потому что это страница генерируется динамически каждый раз, как я могу отключить ssr на этой странице?

Answer 1

Функция dynamic() также может использоваться без динамического импорта:

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
})

Все, что находится в этом компоненте, не будет видно в источнике SSR.

Contact me at <NoSsr>email@example.com</NoSsr>

Answer 2

Ленивая загрузка компонента и отключение SSR.
https://github.com/zeit/next.js#with-no-ssr

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
  ssr: false
})

export default () => (
  <div>
    <DynamicComponentWithNoSSR />
  </div>
)

Answer 3

Это поздний ответ, но в случае, если кто-то столкнется с этим:

export const isServer = () => typeof window === `undefined`;
const Page = () => isServer() ? null : (

  <> 
      <YourClientSideComponent />
  </>
);

Это на уровне "страницы". isServer() предотвращает рендеринг чего-либо на стороне сервера. Вы также можете, если хотите, предотвратить ssr на уровне компонентов:

export const isServer = () => typeof window === `undefined`;
const Page = () =>(

  <> 
      { .!isServer() && <YourClientSideComponent /> }
  </>
);

Answer 4

Вы не можете отключить SSR. ЧИТАТЬ ..

Если вы хотите инициировать что-либо только на стороне клиента, вы можете использовать componentDidMount функцию lifeCycle. Если вы хотите инициировать со стороны сервера, вы можете использовать функцию getInitialProps .