Текущая практика для CSS с компонентами React, похоже, использует загрузчик стиля webpack, чтобы загрузить его на страницу.
import React, { Component } from 'react';
import style from './style.css';
class MyComponent extends Component {
render(){
return (
<div className={style.demo}>Hello world!</div>
);
}
}
Таким образом, стильный загрузчик введет элемент <style>
в DOM. Тем не менее, <style>
не будет находиться в виртуальной DOM, поэтому, если сделать рендеринг на стороне сервера, <style>
будет опущен. Это приведет к тому, что страница FOUC.
Есть ли какие-либо другие способы загрузки модулей CSS, которые работают как на стороне сервера, так и на стороне клиента?