是什么原因导致 NextJS 警告：“来自服务器的额外属性：data-new-gr-cs-check-loaded...”
Md *_*lam 143 javascript ecmascript-6 reactjs next.js
我从 NextJS 应用程序收到以下警告：
警告：来自服务器的额外属性：data-new-gr-cs-check-loaded、data-gr-ext-installed、cz-shortcut-listen、data-lt-installed
我不知道为什么会发生这种情况，这是什么解释？
Ahm*_*bai 347
这通常是由于当在浏览器上执行尝试与 UI 交互时，扩展程序将这些额外的属性与您的代码一起传递，这会导致服务器上呈现的内容与客户端上呈现的内容之间不匹配。
因此，类似于Grammarly、ColorZilla和LanguageTool的扩展是导致此警告的原因，因此您必须找出哪个扩展在执行此操作，然后禁用/配置它，使其不在您通常用于开发的端口上运行。这是警告的直接修复，因为始终建议避免在开发中进行扩展。
Elements如果您在devTools 部分检查应用程序纯 HTML，您可以找到这些额外的属性
通常使用缩写，就像这里一样，lt代表LanguageTool、grGrammaly和ColorZilla 。这可以帮助检测扩展名。cz
很高兴知道：
您可以通过在RootLayout 的开始标记中设置suppressHydrationWarningto来抑制水合警告：true<body>
export default RootLayout({ children }) {
return (
<html lang="en">
<body suppressHydrationWarning={true}>
{children}
</body>
</html>
)
}
<html>有时，如果添加了属性，则必须将其放在开始标记中
<html lang="en" suppressHydrationWarning={true}>
抑制水合警告 仅适用于一层深度，因此如果您将其放入<html>元素中，它不会抑制元素的水合警告<body>，因为它位于更深的一层，这太棒了！因为我们不想抑制更深层次的服务器组件的水合警告。
- 我添加了该属性并且它起作用了。然后我删除了多年来我没有使用过的扩展，还删除了该属性，它也起作用了。感谢您的回答，它帮助我清理了我的浏览器：https://www.youtube.com/watch?v=wgrmB8M0sgU&t=214s&pp=ygUKbWFuIGRyYXdlcg%3D%3D (2认同)
dou*_*mes 28
Chrome 发布了一项新功能，可以禁用特定 URL 的扩展，这很棒，因为此警告似乎只是一个开发环境问题。只需将chrome://flags/#extensions-menu-access-control其放入 Chrome 浏览器即可启用此标志并重新启动 Chrome。
重新启动后，您可以在浏览 URL 时单击扩展程序图标（位于浏览器的右上角），http://localhost:3000以（仅）关闭该 URL 的扩展程序！不需要suppressHydrationWarning={true}上面提到的道具。
小智 12
停止ColorZilla和Grammarly扩展解决了我的问题。
更新：更多导致相关问题的扩展：
- 彩色齐拉
- 语法
- Wikiwand：维基百科现代化
- 错误信息：
Warning: Extra attributes from the server: style - 解决方案：将
Site Access扩展选项从On all sites更改为on specific sites并输入 URL：https://*.wikipedia.org/*
- 错误信息：
| 归档时间： |
|
| 查看次数： |
101464 次 |
| 最近记录： |