CODEWITHSUNDEEP
reactjssafarinext.jsdevice-detectionhydration
Drakalex
Drakalex

Reputation: 1538

Next.js react-device-detect Warning : Text content did not match server

This error happens when using the isMobile property from the react-device-detect library for conditional rendering.

To get to this error, I created a new next app using npx create-next-app, then installed the react-device-detect package with npm. Then I just replaced the index.js with this :

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

When I start the development server and open the page on the desktop, I see Hello and no error. But when I go on Safari on my phone, I see World but I can see in the development tools that I also get this warning message :

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

I've read some articles about hydration and seen that I can add the suppressHydrationWarning property to suppress this warning, but is this what I should do here, or am I not understanding something?

Upvotes: 1

Views: 3483

Answers (1)

T. Short
T. Short

Reputation: 3614

The warning is saying that the content rendered on server side is different to what is rendered on client side. As this happening kind of defeats the purpose of server side rendering, that's why it's warning you. If you are not able to detect the device and server side there is not much you can do and can decide to ignore the warning. It's not the end of the world but could negatively affect SEO and cause some content flickering.

Some possibilities might be:

  1. Take an educated guess about the users device on server side by analysing the user-agent property (I think some libraries can help with that)

  2. Consider using CSS media queries instead to manage what content is displayed to the user (if it's screen size you care about rather than device type). It might make things simpler.

Upvotes: 1

Related Questions