Hydration error in CardContent
Answered
Bombay-duck posted this in #help-forum
Bombay-duckOP
Hello! First time here but, how do I resolve this Hydration error in my dashboard.tsx?
Answered by James4u
const [cpuUsage, setCpuUsage] = useState(generateRandomData(30, 100));
const [ramUsage, setRamUsage] = useState(generateRandomData(30, 90));
const [diskUsage, setDiskUsage] = useState(generateRandomData(40, 95));15 Replies
@Bombay-duck you are using random number as initial state and it's different from server to client
that's why hydration happens
try
next/dynamic with ssr: false@James4u <@1236006865759109130> you are using random number as initial state and it's different from server to client
Bombay-duckOP
can fix this without using ssr: false?
@Bombay-duck can fix this without using ssr: false?
Nope, if you enable SSR, on the server and the client you have different random number - that's the main problem you have hydration error, right?
a bit curious, why do you need it being pre-rendered on the server as those are random values
sorry, what line again?
you are using
Math.random() , no?@James4u you are using `Math.random()` , no?
Bombay-duckOP
shoot
forgot about that
const [cpuUsage, setCpuUsage] = useState(generateRandomData(30, 100));
const [ramUsage, setRamUsage] = useState(generateRandomData(30, 90));
const [diskUsage, setDiskUsage] = useState(generateRandomData(40, 95));Answer
yeah, as I said that's the main reason you get hydration error
Bombay-duckOP
it is just a dumb error of my part