So beheben Sie Hydratationsfehler in Next.js

„Hydratisierung 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.

Ich bekam immer diese Fehlermeldung, als ich zum ersten Mal mit Next.js anfing, wusste aber nicht, was ich tun sollte, und machte mir nie die Mühe, sie nachzuschlagen, da 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 sie herausfinden, indem Sie die Fehlermeldung lesen, die Sie erhalten. Mögliche Lösungen sind:

1. Verwenden Sie useEffect nur zur Ausführung auf dem Client.
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 <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

2. Deaktivieren des serverseitigen Renderings für bestimmte Komponenten.
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 (
    <div>
      <NoSSR />
    </div>
  )
}

3. Verwendung der Warnung „Flüssigkeitszufuhr unterdrücken“
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 mehr aufschlussreiche Inhalte zum Thema Programmierung zu erhalten.

Das obige ist der detaillierte Inhalt vonSo beheben Sie Hydratationsfehler in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!