SSR support

[welldan97]

Hi Freddy, Nice project, thanks for your efforts!

1) At the moment there is an issue with SSR, since in unit-to-px document & window are used.

2) What is the intended usage with SSR. Since the dimensions would not be available, what is it going to render?

Thanks

[FreddyFY]

Hi Dimitry @welldan97,

I'm glad you like it!

To be honest, I don't have experience with SSR. I've just added a fix to :bookmark: v1.3.1, so it no longer throws a error. Now it ignores everything inside a container syntax.

What do you say to this solution, is there a better one?

[welldan97]

Thank you very much for such a quick reaction and a quick fix. That's very nice.

For my needs it's perfect and I bet other people would be happy as well.

---

One thing though, it seems that client&server classes don't match. I get this:

 Warning: Prop `className` did not match. Server: "sc-bdVaJa sc-dymIpo kQcSmY" Client: "sc-bdVaJa sc-fYiAbW bDXmDu"

That being said, I wish i knew a good solution for SSR, but I think unless this query would be supported natively by browsers, there is no easy way to solve it. There would be always some caveats.

One idea would be just to leave it as it is now, and may be just fix the warning. I.e. it could render same way as on server and then rerender with proper dimensions in mind. I.e. use componentDidMount for update, since it's only executed on a client.

But then again, I'm not even sure it would give some performance advantage.

[FreddyFY]

Thanks for your feedback.

Unfortunately I'm not able to reproduce this issue. Could you provide a sample code/sample repo where I can reproduce that?

Doesn't happen this error when using styled instead of styledContainerQuery? Is this related to this issue styled-components/styled-components#1880

[Quocnamit]

I try to use the Styled Components in React-Starter-Kit and I got the same warning

[FreddyFY]

Hi @Quocnamit, I could reproduce this issue with kriasoft/react-starter-kit. But in my case the error occurred also, just with styled-components. Can you agree with me?

[Quocnamit]

Hi @FreddyFY,

Yes, got issue within styled-components in SSR. I fixed it now base on https://www.styled-components.com/docs/advanced#server-side-rendering

Important: Originally, RSK uses CSS Modules. I'm on the way integrating Styled-Components to my app so that they are existed in my code now. Please see below code that combines styles of CSS Modules and Styled-Components in server.js

[FreddyFY]

Thanks for your explanation @Quocnamit!

I will close this issue now, because it shouldn't throw any more error.