Add example using glamorous 💄

[paulmolluzzo]

I created a quick example using glamorous. It's very similar to glamor (it depends on it), but why not. 🤷‍♂️

[paulmolluzzo]

Now.

There's a big FOUC. I'm not sure if it's my example or glamorous. 😟

[kentcdodds]

That FOUC is super sad. I would be spelled if it were glamorous. But I suppose it could be. Does the Glamor example do that?

[paulmolluzzo]

@kentcdodds Now for with-glamor: https://with-glamor-jvryhwqqfq.now.sh

---

@rauchg it would be great if all the examples were hosted on now.sh already.

[kentcdodds]

Ah, no FOUC on that because it's doing server-side rendering with rehydration. You can actually do this same thing with glamorous! It's actually the exact same process (using glamor APIs). Can you see if that will solve the FOUC issues?

[paulmolluzzo]

Fixed the FOUC.

[kentcdodds]

This is excellent! Thank you very much :)

[adamsoffer]

Is this required on every page? Can we make this more DRY?

[paulmolluzzo]

You could probably put this in a global component like a layout and get away with it. I haven't given it a try though.

FWIW, I'd call this a "working example" more than a "best practices example". 😉

[adamsoffer]

Cool. Out of curiosity what are we rehydrating here? What's stored insides ids?

[paulmolluzzo]

We're rehydrating the CSS by shoving the computed styles into the DOM in the head. This is actually being done by glamor. See here for more: https://github.com/threepointone/glamor/blob/master/docs/server.md

The ids are the hashes that are part of the generated classes uses in the CSS.

Here's an example I just pulled from a different project:

__NEXT_DATA__ = {"props":{},"pathname":"/","query":{},"buildId":"-","buildStats":null,"assetPrefix":"","err":null,"ids":["14e33nr","151tlpa","63oe3q","35577l","wfyxwh","858wo0","2y5bqi","1nvbmsg","17186zx","cuyszr","ehn2ke","6l3qzw","1jfbwxw","gzrewh","1jh79q9","kv69lr","ubp1jq"]}

[paulmolluzzo]

@ads1018 You can DRY this up by including in a component (like a layout component) and using that on all the pages. See here: kentcdodds/glamorous-website#14

[adamsoffer]

Ah perfect. This is exactly what I was thinking. Thanks!