Issues with server side rendering.

[ghost]

Hey there, We're trying this with this starter kit https://github.com/kriasoft/react-starter-kit. The issue that we're having is that we get an empty div when the client renders. If we disable Javascript, we get all the <XBlock> items. With Javascript enabled we see the first load on the server and then all content disappears. We wrapped the content in a div (display block) as you suggest in #2

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div class="xmasonry" style="position:re
 (server) <div class="xmasonry xmasonry-static" st

Any ideas what could be the issue?

Thanks!

[nikitaeverywhere]

Interesting. Thank you Alejandro again for pointing on XMasonry issues.

I see the problem. I think it's a major server-side rendering algorithm cons. When designing it, I was expecting that server-side rendered markup will never go directly to browser but to search bots for example.

Could you please create a demonstation code/repo for this problem? It would dramatically save my time and I suppose you already have a setup.

Thank you!

P.S. Expect me to get back to this in ~17 hours, hopefully that's okay to you!

[alejandronanez]

Hey @zitros thanks a lot for your collaboration! I have the code on a private repo but let me see if I can repro it locally with a new project.

Thanks again!

[alejandronanez]

Hey @ZitRos I couldn't replicate this locally. Here's the repo (the warning is still there though) https://github.com/alejandronanez/ssr-masonry

Any clue you have about how we can make this work is really appreciated!

Thanks!

[nikitaeverywhere]

Aha, it's just a warning. The reason behind this is that XMasonry adds some additional stylings while rendering on the server.

I think we can simply remove those styles as they can be defined another way, by the user. But before doing this, please, check whether this helps. Thank you!

[ghost]

Sweet! We really like this module, thanks a lot for building it.

We can close this issue then.

[nikitaeverywhere]

Thank you for the feedback!

Did the SO answers I linked eliminated the warning? I wasn't diving deep to React's server side rendering so it may be a good topic to discuss. Anyway, tell me if it's on XMasonry side.

Cheers!

[ghost]

We haven't tried that yet! Will let you know once we try it though.

[nikitaeverywhere]

I'm just trying to figure out why have you closed the issue if the warning message was not eliminated :) On Fri, Sep 15, 2017 at 4:15 PM Alejandro Nanez notifications@github.com wrote:

We haven't tried that yet! Will let you know once we try it though.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/ZitRos/react-xmasonry/issues/10#issuecomment-329779437, or mute the thread https://github.com/notifications/unsubscribe-auth/AEwhSFR-VV77Ox2EprFjpN8RlYHUD6KUks5siniBgaJpZM4PWvSl .

[paustria]

I'm having this issue. How do we fix this?

[nikitaeverywhere]

@paustria, could you please post a simple reproduction/demo of the issue? It would be much appreciated.