dynamic()函数也可以在没有动态导入的情况下使用：

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

封装在此组件中的任何内容在SSR源中都不可见。例如：

// inside the page you want to disable SSR for

import NoSsr from "components/NoSsr";

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

延迟加载组件并禁用SSR： www.example.com

import dynamic from 'next/dynamic'

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

export default () => <DynamicComponentWithNoSSR />

这将禁用下一步。js SSR，把这个放到你的app上。土耳其电信公司

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

这是一个迟来的答案，但如果有人遇到这个：

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

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

  <> 
      <YourClientSideComponent />
  </>
);

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

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

const Page = () =>(

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

我们也可以使用react-no-ssr React组件。
让我们说评论是我们的客户端唯一的组件。现在我们只需要在客户端上呈现它。我们这么做

import React from 'react';
import NoSSR from 'react-no-ssr';
import Comments from './comments.jsx';

const MyPage = () => (
  <div>
    <h2>My Blog Post</h2>
    <hr />
    <NoSSR>
      <Comments />
    </NoSSR>
  </div>
);

下面是我根据React文档中提到的内容提出的一个解决方案： www.example.com

class ClientOnly extends React.Component {
  state = {
    isClient: false,
  };

  componentDidMount() {
    this.setState({
      isClient: true,
    });
  }

  render() {
    const { isClient } = this.state;
    const { children } = this.props;

    return isClient ? children : false;
  }
}

然后你可以用它 Package 任何组件/块，它不会在服务器上呈现。例如

<ClientOnly>You're logged in as {name}</ClientOnly>

这也防止了下面的React。水合物警告“警告：服务器HTML应包含中的匹配项。“

在@refactor回答中，react-no-ssr不适用于某些类型脚本问题。
我只是写了一个非常简单的NoSSR组件，如下所示：

import { ReactNode, useEffect, useLayoutEffect, useState } from 'react'

const DefaultOnSSR: React.FC = () => null

export const NoSSR: React.FC<{ children: ReactNode; onSSR?: ReactNode }> = ({ children, onSSR = <DefaultOnSSR /> }) => {
  const [onBrowser, setOnBrowser] = useState(false)
  useLayoutEffect(() => {
    setOnBrowser(true)
  }, [])
  return <>{onBrowser ? children : onSSR}</>
}

如果你想避免SSR，可以在任何地方使用，如下所示：

const MyPage = () => (
  <div>
    <h2>My Blog Post</h2>
    <hr />
    <NoSSR>
      <Comments />
    </NoSSR>
  </div>
);

完全基于Erik霍费尔的答案，您可以创建一个HOC来 Package 您的页面或其他组件。

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

另一个我认为最简单的解决方案是使用process.browser，这只在客户端运行时才是正确的。

<div>
  {
    process.browser && <Hidden />
  }
</div>