Hydration text content mismatch on

原文地址：https://jpinb.cn/content/1957446101439086592

遇到一个报错：说水合不匹配，大致的意思是服务端渲染的内容和客户端渲染的内容不一致，如下图所示。

上图是浏览器打印出来的警告，可以看到两个红色的框框，上面的框框表示服务端渲染的内容，下面的框框表示客户端渲染的内容，它说这两个内容不一致。

我们都知道，使用nuxt框架，通过浏览器地址栏访问时，js会在服务端执行一次，也会在客户端执行一次。Hydration text content mismatch on问题就是在服务端渲染时得到的html和在客户端渲染时得到的html不一致，我们可以根据浏览器给出的提示去检查，看到底是哪里不一致，然后再看自己的代码去推断，这些不一致的内容是怎么来的。

但我上图展示两个框框的内容其实是一模一样的，我特意拿出来，在notepad++中检查了一遍。可以看到这俩字符串是一模一样的，在文本中出现了两次，如下图所示

最后发现原因是\r\n。我的字符串里有回车换行符，用的是\r\n，可能在服务端和客户端渲染时，\r\n渲染的不一样了，把数据里的\r\n去掉就好了。这个应该算框架bug吧？