如果您想直接查看结果，请点击以下链接

[asikurrahmanshuvo]

当渲染的 HTML（使用 SSR、ISR、静态导出或其他 Next.js 渲染技术构建）已更新，但页面加载后更新的 React 代码没有更新时，就会发生这种情况。

React 水合错误令人沮丧。许多个性化方法不起作用，因为它们没有考虑到 Next.js SSR 构建每个页面两次的方式——服务器渲染和客户端渲染页面之间的不匹配既令人困惑又难以修复。

在本分步教程中，我们将学习如何使用Netlify 上的 Next.js 高级中间件来转换 Next.js 应用程序以允许个性化、拆分测试和 A/B 测试，而无需复杂的解决方法（例如创建同一页面的两个不同版本并在它们之间设置重定向或重写）。


查看演示
或者直接跳到源代码。
为什么 Next.js 中会发生 React hydration 错误
在 Next.js 应用中，页面会被渲染两次：

在服务器阶段使用 SSR、ISR 或静态导出。这会获取 React 组件并将其转换为渲染的 HTML，无需启用 JavaScript 即可运行。
在客户端阶段（称为“hydration”），浏览器 牙买加whatsapp数据 使用 JavaScript 将应用程序挂载为 React 代码。这会将静态 HTML 重新转换为活动 JavaScript 应用程序，称为“单页应用程序”（SPA）。
React 要求服务器渲染的标记与 React SPA 标记完全匹配。

由于 Hydration，在边缘转换 React 代码很困难
在边缘转换 HTML 的操作相当简单：设置一个边缘函数，使用 HTMLRewriter 之类的工具，就可以开始比赛了！

但是使用 React hydration，您必须同时转换呈现的 HTML和呈现 SPA 的 JavaScript — — 在许多情况下，这往往非常复杂。

如何转换 Next.js 页面并避免 React hydration 错误
修改 Next.js 页面并避免 hydration 错误的常见解决方法相当笨重。指导方法是创建同一页面的两个略微修改的版本，然后使用重写来更改显示的内容。

这对于拆分测试场景来说很好，但不能处理个性化并且还会造成痛苦的维护问题。

为了实现真正的个性化，我们需要定制每个用户的显示内容，而这目前需要完整的服务器渲染策略。

在本教程中，我们将介绍一种允许个性化的技术，无需创建页面的多个版本或需要诉诸完整的 SSR 进行个性化。

1. 创建 Next.js 应用
如果您还没有 Next.js 应用，请使用以下命令创建一个：

注意：转换页面目前依赖于 props。只有 props 中的文本才能进行转换，且不会出现水合错误。