search

ivansevillaa / use-next-blurhash

A custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in nextjs getting so a better user experience.
MIT License
78 stars 6 forks source link

hydration error when using SSR #2

Closed bonesoul closed 2 years ago

bonesoul commented 2 years ago

getting blur-data using:

const [blurDataUrl] = useNextBlurhash(country.photo_blurhash);

and then using it in image component:

  placeholder="blur"
  blurDataURL={blurDataUrl}

causes a hydration error as client and server side produces different outputs.

ivansevillaa commented 2 years ago

Hello @bonesoul sorry for being late. Did you solve it? If you want, you can create a PR fixing that would be awesome and so helpful to me. Other Way if you can't, just tell me and I'll work on it to solve it.

krstivojevicv commented 2 years ago

I`m having the same issue. The cause of the problem seems to be the mismatch in image data url created on server and on client.

ivansevillaa commented 2 years ago

Hi @krstivojevicv! I couldn't understand, could you give me an example? And why do you create the dataUrl on the server?

But I'm not sure if I understood why the bug happens.

krstivojevicv commented 2 years ago

Hello @ivansevillaa

Thx for the lib by the way :)

Its easy to reproduce, just run the NextJS app in SSR mode. Im not creating dataUrl on the server, nextjs is. It prerenders the html page on server and then hydrates it on client (https://reactjs.org/docs/react-dom.html#hydrate). My guess is that issue is a result of image generated on server side (by canvas lib - https://www.npmjs.com/package/canvas) differs from image generated on client side during hydration.

I might be wrong, but this is the only explanation I could come up with

ivansevillaa commented 2 years ago

Fixed on #6.

If the error is still reproducing, reopen the issue please