search

scaleflex / react-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/react-cloudimage-responsive/issues
MIT License
45 stars 16 forks source link

Compatibility with Next.js and Server side rendering #14

Closed pfranck closed 4 years ago

pfranck commented 4 years ago

I want to know if React Plugin will work and have not issue when use Next Js to make Server Rendering. Since on Server doesnt exist a Window to calculate image sizes can get an issue during pics shown. Or if there any solution when do Server Rendering?

dzmitry-stramavus commented 4 years ago

Hey,

yes the plugin is SSR friendly. What we do is just not process images during server rendering.

We can improve this behavior by rendering blurred images and on a client when good quality image is downloaded we can replace them. So far we haven't got such a request and just make sure it works in SSR.

renep16 commented 4 years ago

Hi, thanks for your comments, Also yes, the pic loads fine then it Client finally loads and plugin works, the issue comes when SSR render the first html it sends, send the original route of the pic, so the full pic is loaded and requested before client load and plugin work. I have just upload a example here: http://209.200.5.60:3000/ Is a basic App, I am using Razzle framework for SSR but its the same behavior than Next.js.

So the pic is hosted on http://hersweethand.com/DSC_0096.JPG

The full pic is requested and then client.js loads plugin active and request the new pic.

I am also using the react-cloudimage-responsive-blur-hash

dzmitry-stramavus commented 4 years ago

hey @renep16 ,

Can you pls test 1.2.0-beta.0 version(blur-hash version), I put base64 transparent placeholder for SSR. If it works well for you I'll include it in next release

renep16 commented 4 years ago

Yes it works fine now, probably the last thing will be keep the ratio to avoid the HTML jump, the rest is fine its avoid the full image load. You can also see the result http://209.200.5.60:3000/

dzmitry-stramavus commented 4 years ago

sadly to say but it's not possible as we cannot detect any width of html container on server