URL generation API, server-side rendering, and hydration problems

caprica

I am using url-gen to generate image URLs in a Remix application, although I imagine this would be the same issue with any server-side rendering framework.

Basically, I get hydration errors when I generate URLs due to a mismatch in client vs server rendering.

For example, server renders something like this:

https://res.cloudinary.com/xxxxxxx/image/upload/v1/whatever/filename?_a=BATASxa20

Client subsequently renders this:

https://res.cloudinary.com/xxxxxxx/image/upload/v1/whatever/filename?_a=BATASxAA0

You can see this "?_a" query parameter value is different each time, and so I am forced down an error path, or at least a sub-optimal path whereby Remix switches everything to client-side rendering.

DannyFromCloudinary

Hey @caprica . Thanks for getting in touch.

The ?_a= param is used internally for analytics, but I can see why it would be troublesome when trying to compare URLs. To remove this ,you will need to set {analytics: false} as part of the urlConfig params. For further context please see https://github.com/cloudinary/js-url-gen/blob/master/src/assets/CloudinaryImage.ts.

We have an example of this in action which you can see here: https://codesandbox.io/s/autumn-breeze-juc225?file=/src/App.js:289-314

I hope this helps. Please let me know if you have any further questions.

Kind regards,

-Danny