search

cedricdelpoux / react-responsive-masonry

React responsive masonry component built with css flexbox
https://cedricdelpoux.github.io/react-responsive-masonry/
MIT License
353 stars 35 forks source link

v2.2.1 - Broken on SSR due to window undefined #120

Closed jonluca closed 1 day ago

jonluca commented 4 weeks ago

CleanShot 2024-06-28 at 11 43 23@2x

It looks like GitHub does not have the latest version of the source code, but v2.2.1 broke SSR by having an unprotected window call during render

NawarA commented 1 week ago

would love to see a fix on this too!

breaking our next.js app

DanielWahl commented 1 week ago

Same here.

tygrxqt commented 1 week ago

It broke some of my apps too. The two workarounds I found were either to render the component on the client, or the package version needs to be downgraded to 2.2.0.

cedricdelpoux commented 1 day ago

Can you checkout v2.3.0? It should resolve the issue

NawarA commented 1 day ago

Can you checkout v2.3.0? It should resolve the issue

Thank you so much for the patch, checking now...

Looks like the SSR error is gone 🥳

Quick question: looks like ResponsiveMasonry initially renders with 1 column, and then it kicks in and respects columnsCountBreakPoints. This creates a Layout Shift, which dings a website's/PWA's SEO score (see Chrome Lighthouse or this article).

Is it possible to have ResponsiveMasonry initially render using the values in columnsCountBreakPoints, instead of defaulting to 1 initially?

cedricdelpoux commented 1 day ago

It could be great! PR's are welcome if you want to help :)