Doesn't work server-side

[marcelscruz]

Doesn't work server-side

[marcelscruz]

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.

[RobertBroersma]

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.