Блог

Фон:

Мы заметили, что в рабочей и в некоторых промежуточных средах обработчики onClick на странице SSR не вызываются. Сравнивая рабочие и нерабочие ( npm run start ) развертывания, мы определили, что нерабочие развертывания не вызывают методы визуализации() компонентов на странице сразу после перезагрузки страницы, в то время как рабочие развертывания вызывают. Мы предполагаем, что это означает, что гидратации не происходит.

• Развертывания разработки ( npm run dev ) работают безупречно
• Мы не видим сообщений консоли на стороне браузера.
• Мы не видим предупреждений на стороне сервера
• npm build --debug Предлагается только перейти на новый API ChunkGraph. В противном случае никаких предупреждений.

Сейчас мы задаемся вопросом…

qq:

Если не начинать снова с нового приложения «создать следующее» и постепенно развивать приложение в направлении нашей текущей реализации до тех пор, пока оно не сломается, каковы предлагаемые способы определения основной причины(причин) подобной проблемы?

Одна из проблем здесь заключается в том, что, по-видимому, при сбое гидратации страницы SSR в next.js, предупреждающее сообщение не обязательно будет сгенерировано.

Я надеюсь, что у кого-то есть лучшее предложение, чем следующее, но я предложу этот человеческий сценарий, который работал для меня несколько раз:

• git checkout -b "hydration-problem-02" чтобы создать филиал для этих усилий
• добавьте a console.log('render called') в верхнюю часть метода render() для pages/_app.js. Это должно привести к появлению сообщения на каждом гидрате, что позволит легко заметить, когда страница увлажняется/не увлажняется.

Затем несколько раз:

• упростите значительную часть приложения.
• npm run dev для работы в режиме разработки
• убедитесь, что ваше изменение не нарушило работу приложения неожиданными способами
• rm .next/ node_modules/ package-lock.json
• npm install amp;amp; npm run build amp;amp; npm run start
• убедитесь, что приведенная выше команда успешно выполнена
• обновите страницу в браузере
• проверьте наличие сообщения в консоли браузера.
• git commit -am "msg that indicates what you changed and if it helped"
• если проблема не устранена, повторите эти действия

Выполнение описанных выше коммитов должно помочь сделать процесс более надежным. Экс. Если вы думаете, что, возможно, забыли протестировать в производственном режиме, вы можете вернуться к этой фиксации и повторно протестировать, чтобы подтвердить, что вы не ошиблись в тестировании.

Как только у вас будет рабочая и нерабочая фиксация приложения, вы можете выполнить двоичный поиск ошибки, добавляя или удаляя все меньшие и меньшие фрагменты функции.

Основные причины сбоев тихой гидратации, которые я видел, включают:

• два модуля, которые взаимно импортируют друг друга
• import '..../bootstrap.js' в компоненте, а не _app.js