Förklaring

Det här felet är en konsekvens av ett annat hydreringsfel som inträffade utanför en Suspense-gräns. React försökte hydrera sidan men stötte på ett fel, och eftersom ingen Suspense-gräns fångade upp det kastades hela server-renderingen bort. Webbläsaren tar över och renderar om allting från scratch.

Resultatet är sämre prestanda: all server-renderad HTML är bortkastad och besökaren väntar längre på synligt innehåll. Dessutom kan SEO-fördelarna med server-rendering gå förlorade.

Felet pekar på ett underliggande problem. Rätt åtgärd är att lösa det ursprungliga hydreringsfelet, inte att lappa det med Suspense.

Vanliga orsaker

Alltid ett symtom på ett annat fel, oftast hydration-failed eller text-content-mismatch. Ser man det här felet bör man leta efter det bakomliggande hydreringsfelet i konsolen.

Lösning

Identifiera och åtgärda det underliggande hydreringsfelet. Som en defensiv åtgärd kan komponenter som riskerar att hydrera fel omges av en <Suspense>-gräns så att felet isoleras:

<Suspense fallback={<Skeleton />}>
  <KomponentMedRisk />
</Suspense>

Det löser inte grundproblemet men begränsar skadan till den specifika komponenten i stället för hela sidan.