search

paulcollett / react-masonry-css

React Masonry layout component powered by CSS, dependancy free
https://paulcollett.github.io/react-masonry-css/demo/
MIT License
961 stars 66 forks source link

SSR support #58

Closed tobiasriemenschneider closed 4 years ago

tobiasriemenschneider commented 4 years ago

Does this library provide SSR support for frameworks like Gatsby?

Reason I'm asking: I tried it out using Gatsby. On initial load the default breakpointCols are used, independently from the current viewport width of the browser. After a second or so the columns are jumping into place, according to the breakpointCols applicable, based on the viewport width of the browser, which looks weird.

I assume it's due to missing SSR support?

paulcollett commented 4 years ago

This column adjustment/jumping is due to the the server not knowing the page size upfront, so it renders the default columns first until the client side code takes over and hydrates the correct column count

There's not much we can do for this, other than set the default to be the closest ideal for your users, or simply hide the masonry component until the client has rendered it.

tobiasriemenschneider commented 4 years ago

Makes sense. Thanks for your reply.

.. simply hide the masonry component until the client has rendered it.

That's what I also thought of. Will do this. Thanks again!