Next.js/ Реагировать на предупреждение при генерации случайных значений в компоненте

Question

Я создаю приложение next.js, которое генерирует случайные числа, которые генерируют предупреждение:

Предупреждение: текстовое содержимое не соответствует. Сервер: "1" Клиент: "2"

Я думаю, я понимаю, почему я получаю это предупреждение (виртуальный DOM вроде как-то не синхронизирован с тем, что было отправлено с сервера). Мне просто интересно, есть ли способ сообщить next.js/React, что это нормально в этой ситуации. Или есть способ генерировать случайные числа на сервере и позволить клиенту использовать это как литерал?

Или я должен просто проигнорировать предупреждение?

Answer 1

Перевод случайной переменной JavaScript в состояние React решил для меня проблему.

Вот моя проблема (упрощенная) раньше:

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

После

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

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

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

Мой код использовал React Hooks useState а также useEffect, но предыдущие методы жизненного цикла React setState а также componentDidMount тоже должно работать нормально

Answer 2

Я бы посоветовал вам обернуть контент, в котором у вас есть произвольно сгенерированный контент, внутри компонента.

components/NoSsr.js

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

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

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

А потом в вашем файле:

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

Answer 3

я бы сделал это сuseMemo:

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