"Die Hydratation ist fehlgeschlagen, weil der vom Server gerenderte HTML-Code nicht mit dem Client übereinstimmte...."

Wenn Sie Next.js zum Erstellen von Anwendungen verwendet haben, müssen Sie den oben genannten Fehler oder etwas Ähnliches erhalten haben. Es wird als Hydratationsfehler bezeichnet.

Als ich zum ersten Mal mit Next.js anfing, bekam ich diese Fehlermeldung, wusste aber nicht, was ich tun sollte, und habe nie nachgeschaut, weil sie zu diesem Zeitpunkt keinen wirklichen Einfluss auf meinen Code hatte. Erst als ich von einem Interviewer gefragt wurde, was ich tun würde, um einen Hydratationsfehler in Next.js zu beheben. Ich war verblüfft, denn jetzt ging es nicht darum, dass der Interviewer versuchte, mich zu Fall zu bringen, sondern um Lässigkeit und pure Ignoranz. Ich möchte nicht, dass Sie in Ihrem nächsten Interview so sind wie ich. Lassen Sie uns also über die Flüssigkeitszufuhr sprechen.

Hydration ist der Prozess, bei dem statisches HTML durch das Hinzufügen von Javascript interaktiv wird. Wenn eine Webseite auf dem Server gerendert wird, verliert sie normalerweise ihre Interaktivität und Event-Handler, bevor sie zum Client gelangt. React ist für den Aufbau des Komponentenbaums auf dem Client verantwortlich. Dies wird als Hydratation bezeichnet, da dadurch die Interaktivität und Ereignishandler hinzugefügt werden, die beim serverseitigen Rendern des HTML verloren gegangen sind. React vergleicht es mit dem tatsächlich serverseitig gerenderten DOM. Sie müssen gleich sein, damit React sie übernehmen kann.

Wenn es eine Diskrepanz zwischen der Seite, die wir haben, und dem gibt, was der Kunde denkt, dass wir sie haben sollten, erhalten wir einen „Hydrationsfehler“. Zu den häufigsten Ursachen für Hydratationsfehler gehören: Falsche Verschachtelung von HTML-Elementen, unterschiedliche Daten, die zum Rendern verwendet werden, Verwendung von Nur-Browser-APIs, Nebenwirkungen usw.

Was auch immer die Ursache sein mag, Sie müssen es herausfinden, indem Sie die Fehlermeldung lesen, die Sie erhalten. Mögliche Lösungen sind:

1. UseEffect nur zur Ausführung auf dem Client verwenden.
Um eine Nichtübereinstimmung der Hydratation zu verhindern, stellen Sie sicher, dass die Komponente auf der Serverseite denselben Inhalt rendert wie beim ersten clientseitigen Rendern. Sie können den useEffect-Hook verwenden, um Inhalte absichtlich auf dem Client zu rendern. Siehe Beispiel unten:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2. Serverseitiges Rendering für bestimmte Komponenten deaktivieren.
Sie können die Funktion zum Deaktivieren des Prerenderings in Next.js für bestimmte Komponenten verwenden. Dadurch können Fehlanpassungen der Flüssigkeitszufuhr verhindert werden. Siehe Beispiel unten:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
  )
}

3. Verwendung der Warnung zur Unterdrückung der Flüssigkeitszufuhr
Es gibt Zeiten, in denen der Inhalt auf dem Server und dem Client zwangsläufig unterschiedlich ist, z. B. bei Zeitstempeln. Sie können die Warnung zur Hydratationsinkongruenz stummschalten, indem Sie suppressHydrationWarning={true} zum Element hinzufügen.

Mit diesen drei Methoden sollten Sie also in der Lage sein, diesen Hydratationsfehler zu beheben, wenn er das nächste Mal beim Aufbau auf Next.js auftritt.

Vergessen Sie nicht, meine Seite zu abonnieren, um weitere aufschlussreiche Inhalte zum Thema Programmierung zu erhalten.