I'm building a next.js app that generates some random numbers which generates the warning:

Warning: Text content did not match. Server: "1" Client: "2"

I think I understand why I get this warning (the virtual DOM is kinda-sorta-out-of-sync with what was sent from the server). I'm just wondering if there's a way to let next.js/React know that this is ok in this situation. Or is there a way to only generate the random on the server and let the client use this as a literal?

Or should I just ignore the warning?

I'm building a next.js app that generates some random numbers which generates the warning:

Warning: Text content did not match. Server: "1" Client: "2"

I think I understand why I get this warning (the virtual DOM is kinda-sorta-out-of-sync with what was sent from the server). I'm just wondering if there's a way to let next.js/React know that this is ok in this situation. Or is there a way to only generate the random on the server and let the client use this as a literal?

Or should I just ignore the warning?

• javascript
• reactjs
• next.js
• vercel

• In which context/method are you creating the random values? – Fabian Schultz Commented Nov 30, 2017 at 9:30
• @FabianSchultz The ponent constructor. – Koen Commented Nov 30, 2017 at 10:34
• also have the same problem - have 'generated' value for link (it's intended), but can't find any solution to remove that warning from my console – andrey Commented Mar 1, 2019 at 10:06
• for nextjs questions, i'd remend going to spectrum.chat and asking there, as a lot of the developers on there use next.js – alex067 Commented Nov 26, 2019 at 19:27
• 1 @Koen Thanks for the reply. I kinda found a workaround. Not ideal, but no more warning at least. stackoverflow./a/59976790/1526406 – Cully Commented Jan 30, 2020 at 18:22

3 Answers 3

Moving JavaScript random variable into React state solved the problem for me.

Here's my problem (simplified) before:

function RandomNumber() {
  const randomNumber = Math.floor(Math.random() * 100);
  return <p>{randomNumber}</p>;
}

After

function RandomNumber() {
  const [randomNumber, setRandomNumber] = useState(undefined);

  useEffect(() => {
    setRandomNumber(Math.floor(Math.random() * 100));
  }, []);

  return <p>{randomNumber}</p>;
}

My code used React Hooks useState and useEffect, but previous React lifecycle methods setState and ponentDidMount should work fine too

What I would suggest is that you wrap the content that you have some random generated content in, inside a ponent.

ponents/NoSsr.js

import dynamic from 'next/dynamic';
import React from 'react';

const NoSsr = ({ children }) => <>{children}</>;

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false,
});

And then in your file:

<NoSsr>
    { Math.random() }
</NoSsr>

I would do it with useMemo:

 const randomNumber = useMemo(() => Math.floor(Math.random() * 100), []);