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

我们还可以使用react-no-ssr React组件。

比方说，“评论”是我们仅用于客户的组件。现在我们只需要在客户端上渲染它。这是我们的方法。

$questions = $subject->questions->whereNotIn('question_id', $questions_ids)->take(30);

Answer 3

您不能禁用SSR。 readmore..

如果只想在客户端启动某些操作，则可以使用componentDidMount lifeCycle函数。如果要从服务器端启动，则可以使用getInitialProps函数。

Answer 4

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 5

这是我根据React文档中提到的内容提出的一个解决方案：https://reactjs.org/docs/react-dom.html#hydrate

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

然后，您可以使用它包装任何组件/块，并且不会在服务器上呈现它。例如

<ClientOnly>Your logged in as {name}</ClientOnly>

这还可以防止以下React.hydrate警告“警告：服务器HTML预期包含。”

Answer 6

将此内容放到_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 7

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

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

  <> 
      <YourClientSideComponent />
  </>
);

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

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

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

Answer 8

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

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

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

8 个答案: