如何禁用 Nextjs 预渲染页面？

Question

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

\n

该文档表示，页面中存在getServerSideProps或getStaticSiteProps会使其分别在每个请求或构建时在服务器上预渲染。

\n

再一次，随着自动静态优化的出现， NextJs 自动确定是否在没有getServerSideProps或\xe2\x80\x94的情况下静态预渲染getInitialProps如果我目前理解这个声明，这意味着所有不存在的页面导出上述服务器端函数，会在服务器上静态生成

\n

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

\n

Answer 1

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

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

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

export default YourComponent