Warning: Prop `style` did not match. Server: about react-stack-grid

[safarudinyoga]

@yyynnn - I got too frustrated with this. I ended up programming my own script to take my array of items, and split it into the number of arrays that there are columns. (1 array -> 5 arrays for 5 columns) The array splitting function orders the items in the new arrays, such that the items appear to be ordered from left-to-right across the page. Each columns has 1 array, but the new array ordering makes it read left-to-right.

React keeps track of page width to know how many columns / arrays to create - with matching css media query breakpoints.

server-side it renders 1 array content, but client side it's immediately broken into additional columns / arrays on load (since server-side does not have a page-width value to go by).

This method is also great for lazy-loading because it continues the left-to-right trend as new items are loaded as you scroll.

please share how you solve this

[yyynnn]

@mdrideout , do you even get elements rendered on SS ? On my side no element while SSR and i get this error, client is fine

[mdrideout]

@yyynnn - I got too frustrated with this. I ended up programming my own script to take my array of items, and split it into the number of arrays that there are columns. (1 array -> 5 arrays for 5 columns) The array splitting function orders the items in the new arrays, such that the items appear to be ordered from left-to-right across the page. Each columns has 1 array, but the new array ordering makes it read left-to-right.

React keeps track of page width to know how many columns / arrays to create - with matching css media query breakpoints.

server-side it renders 1 array content, but client side it's immediately broken into additional columns / arrays on load (since server-side does not have a page-width value to go by).

This method is also great for lazy-loading because it continues the left-to-right trend as new items are loaded as you scroll.