search

wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

Warning: Prop `style` did not match. Server: #59

Open mdrideout opened 5 years ago

mdrideout commented 5 years ago

I am using this with server-side rendering, which I know is discouraged for some reason, but it's all working fine except for this warning on initial load.

Warning: Prop `style` did not match. Server: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:0;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(0px) translateY(10px);-webkit-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transform:translateX(0px) translateY(10px)" Client: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:NaNpx;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(NaNpx) translateY(10px)"

Breakdown

Server Style

Server: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:0;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(0px) translateY(10px);-webkit-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),-webkit-transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transform:translateX(0px) translateY(10px)"

Client Style

Client: "z-index:1;opacity:0;display:block;position:absolute;top:0;left:0;width:NaNpx;transition:opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1),transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1);transform:translateX(NaNpx) translateY(10px)"

For all intents and purposes, I don't need styling or position determined until it reaches the client side. I only need to load the content server-side for SEO purposes.

It's fine if none of the style calculations happen until reaching client side. The problem is that if I disable the enableSSR feature, it omits all of the content from server-side which is not desirable.

yyynnn commented 5 years ago

@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 commented 5 years ago

@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.

safarudinyoga commented 4 years ago

@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