如何从预呈现页面中禁用Nextjs？

Question

如何在我的NextJs应用程序中真正实现CSR (客户端呈现)一些页面？

文档指出，页面中存在的getServerSideProps或getStaticSiteProps将使其在每个请求或构建时分别在服务器上预呈现。

再一次，随着自动静态优化 NextJs的出现，将自动确定是否在没有getServerSideProps或getInitialProps的情况下静态地呈现一个页面如果我目前理解这个语句，这意味着所有不导出上述服务器端功能的页面都将静态地在服务器上生成。

因此，我现在的问题是，我如何才能真正地在客户端呈现像仪表板这样的页面，而没有由于自动静态优化而自动预呈现？

Answer 1

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

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

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

export default YourComponent