Next.js react-device-detect 警告：文本内容与服务器不匹配答案

【问题标题】：Next.js react-device-detect Warning : Text content did not match serverNext.js react-device-detect 警告：文本内容与服务器不匹配
【发布时间】：2022-02-12 04:10:57
【问题描述】：

使用react-device-detect 库中的isMobile 属性进行条件渲染时会发生此错误。

为了解决这个错误，我使用 npx create-next-app 创建了一个新的下一个应用程序，然后使用 npm 安装了 react-device-detect 包。然后我只是用这个替换了 index.js：

    import {
      BrowserView,
      MobileView
    } from 'react-device-detect'
    
    export default function Home() {
      return <div>
        <BrowserView>Hello</BrowserView>
        <MobileView>World</MobileView> 
      </div>
    }

当我启动开发服务器并在桌面上打开页面时，我看到 Hello 并且没有错误。但是当我在手机上打开 Safari 时，我看到 World 但我可以在开发工具中看到我也收到此警告消息：

Warning: Text content did not match. Server: "Hello" Client: "World"
div
MobileView
div
Home
MyApp
PureComponent
ReactDevOverlay
_classCallCheck
AppContainer
Root

我已经阅读了一些关于 hydration 的文章，发现我可以添加 suppressHydrationWarning 属性来抑制这个警告，但这是我应该在这里做的，还是我不明白什么？

【问题讨论】：

标签： reactjs safari next.js device-detection hydration

【解决方案1】：

警告是说服务器端呈现的内容与客户端呈现的内容不同。由于这种情况的发生违背了服务器端渲染的目的，这就是它警告你的原因。如果您无法检测到设备和服务器端，则您无能为力，可以决定忽略警告。这不是世界末日，但可能会对 SEO 产生负面影响并导致一些内容闪烁。

一些可能性可能是：

通过分析用户代理属性对服务器端的用户设备进行有根据的猜测（我认为一些库可以提供帮助）
考虑改用 CSS 媒体查询来管理向用户显示的内容（如果您关心的是屏幕尺寸而不是设备类型）。它可能会使事情变得更简单。

【讨论】：