SSR with Remix

[imsteev]

Hi, I'm using evergreen in a server side app. When I render something like this:

<Pane marginTop="32px" />

the first render of my page does not have the desired spacing. Further investigation led me to realize that the class ".ub-mt_32px" is not included in the css sheet that comes from extractStyles(). But upon the second load, this class is in the stylesheet.

Why would this be happening and how/why would margin classes generate dynamically?

I may be missing something regarding SSR in general, this is the first app I've explored doing it with.

---

My workaround at the moment is to directly apply a style prop:

<Pane style={{ marginTop: '32px' }} />

[brandongregoryscott]

Hey @imsteev, I'm not super well-versed in SSR either, but you shouldn't need to use the style prop directly (and this will likely interfere with certain components & their styling).

I'm assuming you've taken a look at our SSR example. Do you have a minimal reproduction repo for me to test out?

[imsteev]

@brandongregoryscott yeah I followed the concept of that example in a Remix app -- the code is here but you can see for yourself with these steps:

1. visit https://drip.fly.dev
2. notice how there's no spacing
3. refresh
4. styles are there

Did some more digging, and I think this problem is not specific to margins -- it's basically any dynamic value that can be provided (e.g, to a width prop)

[brandongregoryscott]

it's basically any dynamic value that can be provided (e.g, to a width prop)

Yes, ui-box is the base for all of our Evergreen components and is responsible for managing the stylesheet as components are added to the DOM.

I haven't used Remix myself, but I'm guessing it's an issue with where that extractStyles is being called/rendered.