Nextjs: Link-Element führt zu Hydratationsfehlern
Posted: 05 Jan 2025, 14:18
Ich untersuche viele Hydratationsfehler auf meiner Seite, die anscheinend von meiner Migration im letzten Jahr von einer alten nächsten Version auf die aktuellste Version 15.x herrühren. Siehe Screenshots unten:
und
Was ich aus diesen Fehlern verstehe, ist: Das aktuelle HTML des Clients stimmt nicht mit dem überein, was wir auf der Clientseite vorberechnet haben.
was seltsam ist weil ich die Anweisung „use client“ in der Komponente verwendet habe.
Ich könnte all dies in einer Schaltflächenkomponente zusammenfassen, die eine next/link-Komponente verwendet. Deshalb habe ich es so weit wie möglich vereinfacht, aber egal, wie ich diese Komponente bearbeite, es werden Hydratationsfehler in der Konsole angezeigt. Ich habe verschiedene Möglichkeiten ohne Containerelement usw. ausprobiert:
Sobald ich jedoch next/link in dieser Situation entferne, sind alle Flüssigkeitsfehler behoben
was ich nicht will – das sollte eine wiederverwendbare Schaltfläche sein, die untergeordnete Elemente und href als Requisiten abruft und untergeordnete Elemente rendert.
Wie löse ich das? Das? Habe ich eine falsche Vorstellung?
[
]
Code: Select all
Unhandled Runtime Error Expected server HTML to contain a matching in .Code: Select all
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.was seltsam ist weil ich die Anweisung „use client“ in der Komponente verwendet habe.
Ich könnte all dies in einer Schaltflächenkomponente zusammenfassen, die eine next/link-Komponente verwendet. Deshalb habe ich es so weit wie möglich vereinfacht, aber egal, wie ich diese Komponente bearbeite, es werden Hydratationsfehler in der Konsole angezeigt. Ich habe verschiedene Möglichkeiten ohne Containerelement usw. ausprobiert:
Code: Select all
'use client'
import React from 'react'
import Link from 'next/link'
const ButtonComponent = function () {
return (
Button
)
}
export default ButtonComponent
Code: Select all
'use client'
import React from 'react'
const ButtonComponent = function () {
return (
Button
)
}
export default ButtonComponent
Wie löse ich das? Das? Habe ich eine falsche Vorstellung?
[
]