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

Question

是否可以使用Next js在某些页面上禁用ssr？例如，我有一个带有产品说明的页面，在该页面上我使用ssr进行SEO，但我也有一个页面，其中列出了可以过滤的项目或产品，对于该页面，我不想使用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

这是一个迟到的答案，但万一有人遇到这个问题：

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

const Page = () => isServer() ? null : (

  <> 
      <YourClientSideComponent />
  </>
);

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

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

const Page = () =>(

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

Answer 3

该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 4

把它放在你的 _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,
});

Answer 5

完全基于 Erik Hofer 的答案，您可以创建一个 HOC 来包装您的页面或其他组件。

import dynamic from 'next/dynamic';
import React from 'react';

const withNoSSR = (Component: React.FunctionComponent) => dynamic(
    () => Promise.resolve(Component),
    { ssr: false },
);

export default withNoSSR;

然后用作：

import React from 'react';
import withNoSSR from './withNoSSR';

function SomePage() {
    return (
        <div>Only renders in the browser</div>
    );
}

// wrap with HOC on export
export default withNoSSR(SomePage);