Next.js · Senior · Запитання 40 з 75
Компонент показує new Date().toLocaleString() і спричиняє hydration mismatch. Як виправити найкоректніше?
- ✓Правильна відповідь: Виводити час після монтування або фіксувати його на сервері
- 2Вимкнути гідратацію для всієї сторінки через опцію в
next.config - 3Обгорнути компонент у
React.memo, щоб він не перемальовувався
Пояснення
Сервер і клієнт перебувають у різних часових поясах і моментах часу, тому рядок відрізняється. Варіанти: клієнтський компонент, що виводить час після монтування; форматування на сервері з фіксованою зоною; suppressHydrationWarning для елемента з міткою часу. Розширення браузера теж часто спричиняють mismatch.