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

是否可以使用Next js在某些页面上禁用ssr？例如，我有一个页面，上面有产品描述，我使用ssr进行SEO，但我也有一个页面，上面有我可以筛选的项目或产品列表，对于该页面，我不想使用ssr，因为该页面每次都动态生成，我如何在该页面上禁用ssr？

延迟加载组件并禁用ssr：

从“下一个/动态”导入动态
常量DynamicComponentWithNoSSR=dynamic（（）=>import（“../components/List”）{
ssr：错误
})
导出默认值（）=>

这是一个迟交的答案，但万一有人遇到这种情况：

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

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

  <> 
      <YourClientSideComponent />
  </>
);

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

从“下一个/动态”导入动态
从“React”导入React
const NoSsr=props=>(
{props.children}
)
导出默认动态（（）=>Promise.resolve（NoSsr）{
ssr：错误
})

此组件中包装的任何内容在SSR源中都不可见

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

联系我email@example.com

根据React文档中提到的内容，我刚刚提出了一个解决方案：

然后，您可以用它包装任何组件/块，它将不会在服务器上渲染。e、 g

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

您以{name}身份登录

这还可以防止出现以下React.Hyde警告“警告：预期服务器HTML在中包含匹配项”。

我们也可以使用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”导入React；
从“反应无ssr”导入NoSSR；
从“/Comments.jsx”导入注释；
常量MyPage=（）=>(
我的博客帖子

);

另一个而且我相信最简单的解决方案是只使用

process.browser

，这只有在客户端运行时才是正确的

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

{
process.browser&&
}

把这个放到你的_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,
});

从“next/app”导入类型{AppProps}；
从“下一个/动态”导入动态；
从“React”导入React；
常量App=（{Component，pageProps}:AppProps）=>{
返回；
};
导出默认动态（（）=>Promise.resolve（App）{
ssr：错，
});

不需要

。是

之前的“.”！isServer

是故意的吗？这是无效的JavaScript语法。我让它在Next.js项目中工作，其中包含样式化的组件，但并不总是按照要求工作。不知道为什么！！接受的解决方案最适合这将在服务器渲染和客户端渲染之间创建不匹配，这实际上不会禁用渲染。效果很好，可用于包装在_app.js中进行调试，非常好，因为您也可以将其与

_app

一起使用。但有一个限制：它可能会对加载代码的方式产生其他副作用。一个纯React解决方案可能就足够了（例如在一个WSER中描述的），与hook等价的解决方案应该是这样的：

constUseClientCheck=（）=>{const[isClient，setIsClient]=useState（false）；useffect（（）=>{setIsClient（true）}，[]）；return isClient}

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

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

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