Closed pfranck closed 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.
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
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
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/
sadly to say but it's not possible as we cannot detect any width of html container on server
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?