在Next.js中只在服务器端或客户端运行代码

736 阅读1分钟

如何编写只在堆栈的一侧执行的代码:前端或后端

在你的页面组件中,你可以只在服务器端或在客户端执行代码,但要检查window 属性。

这个属性只存在于浏览器内部,所以你可以检查

if (typeof window === 'undefined') {
}

并在该块中添加服务器端的代码。

同样地,你可以只在客户端执行代码,检查

if (typeof window !== 'undefined') {
}

JS提示。我们在这里使用typeof 操作符,因为我们无法通过其他方式检测一个值是否为未定义。我们不能做if (window === undefined) ,因为我们会得到一个 "窗口未定义 "的运行时错误

Next.js,作为构建时的优化,也从bundles中删除了使用这些检查的代码。一个客户端的捆绑包不会包括被包装成if (typeof window === 'undefined') {} 块的内容。