Isomorphic / server-side rendering

[alexmcmillan]

I'm building a simple isomorphic app with nodejs/react and I'd like to try out this method of styling.

Where would I call SmartCss.injectStyles(), considering my components are initially rendered on the server where there is no DOM?

[totty90]

You can do it several ways:

• Create a gulp task to extract the CSS from smart-css into a CSS file and then load it (harder, but works without JS);
• Call SmartCss.injectStyles() only on the client side; The server side just returns the HTML file, no need to return styles too; (But if you want your app to work without JS then you need to do with the above approach;)

[alexmcmillan]

Can definitely tell you're a coder with that semicolon usage ;-)

Call SmartCss.injectStyles() only on the client side;

The main reason for building an isomorphic app is that the same code runs on both the server and the client...

The server side just returns the HTML file, no need to return styles too;

Another reason is to prevent the FOUC (look for "flash of unstyled content") while a page is downloading. If the server delivers HTML but no CSS, that defeats the purpose, no?

For this example I don't need to worry about working without javascript. (I mean, how boring would the world be without JS?!)

I don't mean to sound argumentative.. it's late here and I'm tired :)

[totty90]

The main reason for building an isomorphic app is that the same code runs on both the server and the client...

Yes but even isomorphic apps have some sections that only run on the client and others that only run on the server side and this is one case that is only required on the client side.

Another reason is to prevent the FOUC (look for "flash of unstyled content") while a page is downloading. If the server delivers HTML but no CSS, that defeats the purpose, no?

Thinking better you could do something more: on the server side you get the styles from smart-css as string, create a style tag and add there the styles. This is not very good because you will load a bigger html file everytime (because CSS is in the html). If you could extract that css in a separate file it's ok too.

I don't mean to sound argumentative.. it's late here and I'm tired :)
Don't worry I like objective arguments.