提问人：mbappai 提问时间：11/28/2022 更新时间：11/28/2022 访问量：5916
如何禁用Nextjs预渲染页面？
How to disable Nextjs from pre-rendering a page?
问：
如何真正 CSR（客户端渲染）我的 NextJs 应用程序中的某些页面？
该文档指出，页面中任何一个 or 的存在都会使其分别在每个请求或构建时在服务器上预呈现。getServerSidePropsgetStaticSiteProps
再一次，随着自动静态优化的出现，NextJs 会自动确定是否在没有 或的情况下预渲染静态——如果我目前理解这种说法，这意味着所有不导出上述服务器端函数的页面都将在服务器上静态生成getServerSidePropsgetInitialProps
所以我现在的问题是，我如何真正只在客户端渲染像仪表板这样的页面，而没有由于自动静态优化而让 nextjs 自动预渲染？
答：
8赞
Shubham Waje
11/28/2022
#1
您可以在导出特定组件时禁用该组件的 SSR。
const NoSSRYourComponent = () => {
return (
// ... NoSSRYourComponent code
)
}
// export it with SSR disabled
const YourComponent = dynamic(() => Promise.resolve(NoSSRYourComponent), {
ssr: false,
})
export default YourComponent
评论
0赞
mbappai
11/28/2022
谢谢你的回复 Shubham，但你能为这个答案提供更多的背景信息，或者更好的是参考一个文档吗？谢谢
2赞
Shubham Waje
11/28/2022
因此，禁用背后的主要座右铭是在客户端动态加载组件。如果组件依赖于浏览器 API，例如，或者您想专门在客户端呈现它，这将非常有用。有关详细信息，请参阅文档ssrwindow
0赞
Shubham Waje
11/28/2022
您可以使用以下方式导入它，但动态导出它将使您能够直接使用该组件，而无需在每次导入时禁用该组件。dynamicssr
0赞
mbappai
11/28/2022
啊耶！看了文档后，我确信这是我问题的解决方案。非常感谢Shubham！
1赞
rotemx
10/3/2023
谢谢！您终于解决了我的导出错误问题
评论