reactjs - React Server side rendering of CSS modules

Question

The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in.

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

By doing this the style-loader will inject a <style> element into the DOM. However, the <style> will not be in the virtual DOM and so if doing server side rendering, the <style> will be omitted. This cause the page to have FOUC.

Is there any other methods to load CSS modules that work on both server and client side?

Answer 1

You can use webpack/extract-text-webpack-plugin. This will create a independently redistributable stylesheet you can reference then from your documents.