下一个js - 在某些页面上禁用服务器端呈现

Question

是否可以使用Next js在某些页面上禁用ssr？例如，我有一个产品描述的页面，我使用ssr进行搜索引擎优化，但我也有一个页面，其中包含我可以过滤的项目或产品列表，对于该页面，我不想使用ssr因为这个页面每次动态生成，如何在此页面上禁用ssr？

Answer 1

延迟加载组件并禁用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 2

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 protected]</NoSsr>

Answer 3

您无法禁用SSR。 readmore..

如果您只想在客户端启动某些东西，可以使用componentDidMount lifeCycle函数。如果您想从服务器端启动，则可以使用getInitialProps功能。

Answer 4

这是一个迟到的答案，但万一有人碰到这个：

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

  <> 
      <YourClientSideComponent />
  </>
);

这是在“页面”级别。 isServer()阻止在服务器端渲染任何东西。如果您愿意，也可以在组件级别上阻止ssr：

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

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