如何禁用Nextjs预渲染页面？

Question

如何真正对 NextJs 应用程序中的某些页面进行 CSR（客户端渲染）？

文档指出，页面中存在

getServerSideProps

或

getStaticSiteProps

会使其分别在每个请求或构建时在服务器上预渲染。

再次，随着自动静态优化的出现，NextJs 自动确定是否在没有

getServerSideProps

或

getInitialProps

的情况下静态预渲染 — 如果我目前理解这个说法，这意味着 所有页面不导出上述服务器端函数的，将在服务器上静态生成

所以我现在的问题是如何真正只在客户端渲染仪表板之类的页面，而不需要 nextjs 由于自动静态优化而自动预渲染？

Answer 1

您可以在导出特定组件时禁用 SSR。

const NoSSRYourComponent = () => {
    return (
        // ... NoSSRYourComponent code
    )
}

// export it with SSR disabled
const YourComponent = dynamic(() => Promise.resolve(NoSSRYourComponent), {
  ssr: false,
})

export default YourComponent

Answer 2

是的。就像提到的其他答案一样，我创建了一个全局组件

NoSSR.tsx

文件。

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

const NoSSR = ({ children }: { children: React.ReactNode }) => <React.Fragment>{children}</React.Fragment>;

export default dynamic(() => Promise.resolve(NoSSR), {
  ssr: false,
});

每当我想强制组件仅在浏览器中渲染时，请这样说

CompA.tsx

:

'use client';  // This line becomes useless actually since we do not 
prerender it on the server. Omit it if you like.

export default function CompA() {
  return <div>CompA</div>;
}

我只是像这样用这个组件包装该组件（此代码可以出现在服务器端组件和客户端组件上）：

...
<NoSSR>
  <CompA />
</NoSSR>
...