Closed marcelscruz closed 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.
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.
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 untiluseEffect
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!