Выполнение манипуляций с DOM на стороне клиента после статического рендеринга в NextJS

#reactjs #next.js

#reactjs #next.js

Вопрос:

Я хотел бы отобразить форму Tripetto на моей статической странице NextJS. К сожалению, библиотека Tripetto использует объект «window», который не определен при статическом рендеринге.

Есть ли способ выполнить Javascript на стороне клиента после статического рендеринга в NextJS, чтобы избежать этой проблемы?

Большое спасибо!

Ответ №1:

window не определено на стороне сервера. Вы можете импортировать Tripetto, используя next/dynamic импорт таким образом :

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

Выполнение этого следующего загрузит вашу клиентскую часть библиотеки и window будет определено