Warning: Prop style did not match. Server:

[mdrideout]

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]

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

[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