Question

我有一个非常基本的Node.js + Express应用程序，使用React进行一些服务器和客户端渲染。当Express应用程序返回React呈现的组件作为其响应的一部分时，它将返回到未应用CSS的客户端。然后它会快速闪烁到CSS渲染页面。我有点难以理解正在发生的事情，只是想立即渲染CSS ...我对使用webpack＆amp;反应所以任何帮助/解释将不胜感激。

index.jade

html  
head
    title="Sample app"
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
body
    #app!= content
    script(src='http://localhost:8080/public/index.js')

App.js

if (process.env.BROWSER) require("../styles/App.scss");

import React from 'react';

export default class App extends React.Component {  
  render () {
    return (
      <div>
        <p>Hello, world!</p>
      </div>
    )
  }
}

server.js（摘要）

...
app.get('/*', function (req, res) {  
    let content = React.renderToString(<App />);
    res.render('index', { content: content });
});
...

Answer 1

使用Extract Text Plugin可避免无格式文字的闪烁。 Pete Hunt（React的创造者之一）ran into this same issue with Webpack。从那时起，sokra（Webpack开发人员）创建了这个插件，将css提取到一个样式表中。

如果没有此插件，浏览器将按此顺序执行操作：

显示html（由服务器端React呈现）。
获取Webpack包。
执行在头部插入样式元素的Webpack包。

使用此插件，浏览器按此顺序执行操作：

将样式表加载到头部。
显示html（由服务器端React呈现）。
获取Webpack包。
执行Webpack包。

Webpack和SASS问题（React app）

1 个答案: