Dear reader,
I have a quick question about the react-datocms lib. More precisely the Image Component.
it states that it works both on the clientside and on the serverside. I presume this is in relation with Nextjs (what we use). But I’m quite confused about the GraphQL query to get the necessary information. When querying the responsiveImage
you can give it a format: auto
property. But how does Dato know from the server what the browser supports? I understand for the browser it checks the headers of the request, but that is not possible for the server, right?
Hello @c.boutens
We use IMGIX to manage the image transformations, so the way we process the “auto” parameter is as documented right here: Automatic | Automatic Parameters | imgix URL API Documentation
Thanks for the fast reply @m.finamor but it doesn’t really answer my question. I understand how IMGIX does it, that is the part that confuses me, because they don’t have the headers or user agent to go off when you query DatoCMS from the server.
@c.boutens auto=format
is a query string attached to the URL of your image. For every request to that URL, Imgix looks at the headers to find the most optimized supported format.
Next.js server never actually downloads the image, it simply runs the GraphQL query, and gets the URL of the image as a result, which is then included in the final page.
It’s always the final browser of the visitor that fetches the actual image.
Hope this clears out the air!
Aahhhh okay, far enough, I need to see the GraphQL as the URL “builder” so that doesn’t do any request to the IMGIX itself yet.
THanks @s.verna!
1 Like