Рішення проблеми з Next JS: Hydration failed

6 Березня 2024 в 17:58 40

У вас виникла помилка з Next JS, пов’язана з незбігом ініціалізованого інтерфейсу та того, що було відображено на сервері. Це може статися, коли компоненти, які відображаються на сервері, не збігаються з тими, що відображаються на клієнті після переходу.

Одним із рішень є перевірка компонентів, які ви використовуєте, особливо у разі використання асинхронних функцій або ж обробників подій, які можуть викликатися під час ініціалізації на сервері.

Один з потенційних джерел проблеми у вашому коді – асинхронна функція в компоненті Navbar:

const Navbar = async ({ setting_data }) => {
    // Отримання даних мови асинхронно
    let lang_resp_data = await getLanguageData()
    let lang_code = langCode()
    return (
        <>
            {/* Зміст компоненту */}
        </>
    )
}

const Navbar = async ({ setting_data }) => {

// Отримання даних мови асинхронно

let lang_resp_data = await getLanguageData()

let lang_code = langCode()

return (

{/* Зміст компоненту */}

</>

)

}

У компоненті Navbar ви використовуєте асинхронну функцію, що може спричинити проблеми з ініціалізацією на сервері. Рекомендовано уникати використання асинхронних функцій безпосередньо в компонентах, оскільки вони можуть порушити процес серверного рендерингу.

Для вирішення цієї проблеми вам можна спробувати змінити архітектуру вашого коду таким чином, щоб уникнути використання асинхронних функцій безпосередньо в компонентах, або ж перевірити, чи можна провести ініціалізацію асинхронної частини до початку рендерингу компонента.

Також, переконайтеся, що ви коректно обробляєте динамічні дані під час ініціалізації на сервері, щоб уникнути конфліктів між серверним і клієнтським відображенням.

Наприклад, переконайтеся, що дані, які ви передаєте в компоненти, завантажуються асинхронно тільки на клієнтській стороні, а не на сервері:

const Navbar = ({ setting_data }) => {
    // Отримання даних мови без асинхронності
    let lang_resp_data = getLanguageDataSync()
    let lang_code = langCode()
    return (
        <>
            {/* Зміст компоненту */}
        </>
    )
}

const Navbar = ({ setting_data }) => {

// Отримання даних мови без асинхронності

let lang_resp_data = getLanguageDataSync()

let lang_code = langCode()

return (

{/* Зміст компоненту */}

</>

)

}

Перевірте всі асинхронні функції та динамічні дані, які ви використовуєте, та переконайтеся, що вони правильно обробляються на сервері, щоб уникнути помилок гідратації у вашому Next JS проекті.