Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Server side rendering of CSS modules

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?

like image 837
willwill Avatar asked Jan 05 '16 15:01

willwill


People also ask

Does React allow server-side rendering?

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.

Does React support CSS modules?

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.

Is Reactjs rendered server-side or client-side?

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.

Does React render in browser or server?

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.


1 Answers

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

like image 107
Filip Dupanović Avatar answered Sep 25 '22 21:09

Filip Dupanović