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?
Yes! This is where server-side rendering for React comes in. In this article, I want to introduce you to server-side rending (SSR) with React, reasons to use it, and some popular frameworks for rendering React on the server side.
We will use CSS modules in the context of React but they are not limited to just React. You can use the CSS modules with any module bundler like webpack or browserify or any other way which supports importing CSS files. An alternative to CSS modules in React to create local scope is to use styled components.
By default, your React app will be client-side rendered. This means basically, all of the source code will live in JavaScript files referenced in a single HTML file that initializes your app.
React along with other framework like angular and vue. js are traditional client side framework ,they run in browser but there are technology to run this framework on server side, and next. js is a solution for running react application server side.It also makes react development very simple.
You can use webpack/extract-text-webpack-plugin
. This will create a independently redistributable stylesheet you can reference then from your documents.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With