咨询NextJS警告‘Extra attributes from the server’的产生原因

这个警告里提到的几个属性，全都是浏览器扩展自动注入到页面元素的标记，和你的Next.js代码本身无关，具体对应如下：

• data-new-gr-c-s-check-loaded、data-gr-ext-installed：来自Grammarly拼写检查扩展，用来标记扩展已安装并完成加载状态检查
• cz-shortcut-listen：来自CodeZine扩展，用于标识该扩展已开启快捷键监听功能
• data-lt-installed：来自Lighthouse性能检测扩展，用来表明浏览器已安装该扩展

Next.js会报这个警告的核心原因：
当你用SSR（服务端渲染）或SSG（静态站点生成）模式时，服务器渲染出的原始HTML里并没有这些属性，但浏览器扩展会在页面加载后偷偷给DOM元素加上它们。等到客户端进行hydration（水合）操作时，Next.js会把服务器生成的虚拟DOM和当前浏览器里的真实DOM做严格比对，发现多出了这些属性，就会抛出不匹配警告。

内容的提问来源于stack exchange，提问作者Md Sajedul Islam