时间戳

首页 > 解决方案 > 在 NextJS 中静态渲染后执行客户端 DOM 操作

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

问题描述

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

有没有办法在 NextJS 中静态渲染后执行客户端 Javascript 以避免这个问题？

非常感谢！

标签： reactjsnext.js

解决方案

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

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

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

推荐阅读