search

RobertBroersma / beanheads

Easily create characters for your projects
https://beanheads.robertbroersma.com
MIT License
1.39k stars 93 forks source link

Doesn't work server-side #39

Closed marcelscruz closed 1 year ago

marcelscruz commented 1 year ago

It seems the package doesn't work server-side.

I've tried using it on a Next.js 13 app, and keep getting the Error: Hydration failed because the initial UI does not match what was rendered on the server. error. The workaround for it is to prevent the component from rendering until useEffect runs, which I assume means it only works client-side.

Also, trying to use it on a serverless function to generate an OG image with @vercel/og also doesn't work, though no error message is shown.

Is this a known issue, or is there a different way to mitigate it?

Great project, btw. Thanks for putting this together!

RobertBroersma commented 1 year ago

Hi @marcelscruz

I'm afraid I've created this project before I entered the SSR era, and indeed Big Heads only work on the client. This is because component internally uses Math.random to make sure every component render is a different avatar. This of course yields different results during SSR and hydration.

To work around this you could implement your own API route in Next.js that generates an SVG image like I did here: https://github.com/RobertBroersma/bigheads/blob/main/site/functions/svg/svg.js You can then embed an SVG in your OG Image <img src="/your-api-endpoint.svg" />

Alternatively I'd be very open to a PR that has the BigHeads component accept a parameter for a custom RNG, enabling one to share a seed between server and client for use with a seedable RNG.

marcelscruz commented 1 year ago

That makes sense, thank you for clarifying.

I believe at this point we won't be using it in our project, but I'd love to revisit this idea and potentially contribute to the project.

Have a nice one, and feel free to close this issue.