Math.random() overwritten on hydration

I have a skeleton component which I want to have a slight randomness to its width, so I have

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

However, on hydration, the inner text of the span is removed. I have 2 questions: 1) Why, instead of re-rendering with different randomness, does it just disappear? 2) Can I stop hydration of this skeleton component to only use the ssr sent inner text? - Raz pepesaber

2 Replies

Razboy20OP•2y ago

(wait when did discord add bullet point rendering 👀) Changing renderAsync to renderStream in entry-server fixed this issue.

lxsmnsyc•2y ago

1. hydration requires that the server markup and the client's initial render to match. It's no longer hydration if it just replaces the content.

Gaming

Programming

Math.random() overwritten on hydration