javascript - 错误 : Text content does not match server-rendered HTML

Question

我试图在 next.js 中执行一个简单的算法，但我遇到了这个水合作用错误。

这是我正在使用的代码:

import numeros from "../../functions/numberGenerators.js"

export default function teste(){
    let number = numeros()
    return number.map(n =>  
    <div key={n}>
        Number: {n}
    </div>)
}

和:

export default function megaSena(qtde = 6){
    let listNumbers = []
    while(listNumbers.length <= qtde - 1){
        const numeroRandom = parseInt(Math.random() * 60) + 1
        if (!listNumbers.includes(numeroRandom)){
            listNumbers.push(numeroRandom)
        }
    }
    return listNumbers
}

我遇到了以下错误:

1° - 错误:Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

2° - 错误:文本内容与服务器呈现的 HTML 不匹配。

3° - 错误:Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。

4° - 错误:补水时出错。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端呈现。

我该怎么做才能解决这个问题？

Answer 1

这些错误消息本质上都在说同样的事情:

来自服务器的 HTML 与您的应用呈现的内容不匹配。

为什么会这样？

当 teste 被调用时，它并不总是返回相同的东西。它旨在显示随机数。

这意味着它会显示不同的数字列表，每次 teste 呈现。

当使用服务器端渲染 (SSR) 和像 NextJS 这样的框架时，它使用 React hydration .这只是一个花哨的词，表示 React 正在弄清楚如何从 HTML 文件中提取 DOM 结构并将其转换为正在运行的单页应用程序 (SPA)。

为了使其正常工作，React Hydration 要求来自服务器的 HTML 与您的客户端应用呈现的内容完全匹配。

所以在您的场景中，这就是正在发生的事情:

1. 服务器需要生成 HTML 文件。
2. 它调用 teste，生成随机数字数组并呈现它。
3. 服务器将此 HTML 发送给客户端。
4. 客户端应用调用 teste，生成一个新随机数字数组并呈现它。
5. 它试图“滋润”应用程序，但 HTML 和客户端呈现不匹配。
6. NextJS/React 不知道如何处理这种不匹配，因此它会记录您看到的错误。

如何解决这个问题？

修复很简单，但需要您注意何时需要或不需要。

常见的做法是利用 useEffect() 来确保服务器和客户端在水合过程中呈现相同的内容，并且只在客户端后处理呈现动态内容。

最简单的方法就是什么都不渲染。使用您的代码，它看起来像这样:

import React from "react";

export default function Teste() {
    const [hydrated, setHydrated] = React.useState(false);
    React.useEffect(() => {
        setHydrated(true);
    }, []);
    if (!hydrated) {
        // Returns null on first render, so the client and server match
        return null;
    }

    let number = numeros();
    return number.map((n) => <div key={n}>Number: {n}</div>);
}

这样做是为了确保第一次 Teste 呈现时它会返回 null。

第一次呈现是服务器用来生成 HTML 文件的内容，也是客户端应用程序将用于“水合”过程的内容。

在第一次运行期间，hydrated 将具有默认值 false，这将导致组件返回 null。同样在第一次运行中，useEffect() 将调用 setHydrated(true)，这将在第一次渲染完成后触发第二次渲染。

到第二次渲染运行时，应用程序已经水化，因此无需再担心发生错误。此时 hydrated 将为 true，因此随机数将正常呈现。

更多信息

如果你想了解更多关于 React hydration 的知识，我写了一篇 blog post about fixing these types of errors .

我还发布了一个 NPM 包，有助于简化处理这些类型的水合作用错误:react-hydration-provider

要使用 react-hydration-provider 修复错误，您的代码应如下所示:

import { HydrationProvider, Client } from "react-hydration-provider";

function App() {
    return (
        <HydrationProvider>
            <Client>
                <Teste />
            </Client>
        </HydrationProvider>
    );
}

function Teste() {
    let number = numeros();
    return number.map((n) => <div key={n}>Number: {n}</div>);
}

这将使 Teste 仅在应用程序水化后在客户端呈现。

你也可以像这样做一些更复杂的事情:

import { HydrationProvider, Server, Client } from "react-hydration-provider";

function App() {
    return (
        <HydrationProvider>
            <Teste />
        </HydrationProvider>
    );
}

function Teste() {
    let number = numeros();
    return number.map((n) => (
        <div key={n}>
            <span>Number: </span>
            <Client>{n}</Client>
            <Server>Loading...</Server>
        </div>
    ));
}

这将允许您的应用程序最初为每个数字呈现一条加载消息，然后在应用程序完成水合过程后将其替换为随机数。