在NextJS中进行静态渲染后执行客户端DOM操作

Question

我想在NextJS静态页面中呈现Tripetto表单。不幸的是，Tripetto库使用了“ window”对象，该对象在静态渲染中是未定义的。

在NextJS中进行静态渲染后，是否有一种方法可以执行客户端Javascript来避免此问题？

非常感谢！

Answer 1

window未在服务器端中定义。您可以通过以下方式使用next/dynamic import来导入Tripetto：

import dynamic from 'next/dynamic'
const Tripetto = dynamic(()=> import('Tripetto'), {ssr: false})

接下来执行此操作将加载您的库客户端，并且将定义window