Next.js/React warning when generating random values in a component

Question

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?

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, Mar 01 '19 at 10:06
for nextjs questions, i'd recommend going to spectrum.chat and asking there, as a lot of the developers on there use next.js — alex067, Nov 26 '19 at 19:27
@Koen Did you ever find a solution to this? I'm running into the same problem. — Cully, Jan 29 '20 at 22:44
@Koen Thanks for the reply. I kinda found a workaround. Not ideal, but no more warning at least. https://stackoverflow.com/a/59976790/1526406 — Cully, Jan 30 '20 at 18:22

score 10 · Answer 1 · answered Apr 22 '20 at 18:05

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 componentDidMount should work fine too

score 1 · Answer 2 · answered Jun 03 '21 at 11:41

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

components/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>

Next.js/React warning when generating random values in a component

2 Answers2