javascript - 使用 Express 响应服务器端渲染 - 客户端校验和和样式警告

Question

我是 React 服务器端渲染的新手，正在使用 React、Redux、React router、Material UI 进行一个小型演示。我面临的问题是以下警告。不确定同构样式和 Assets 如何与 webpack 一起工作。

我理解了服务端渲染的流水线，如有错误请指正。

• 使用 renderToString 将 React 组件解析为 HTML。
• 一旦 HTML 在客户端呈现，所有事件、样式都会附加，这意味着 react 尝试再次在客户端呈现组件，如果组件已经创建，它将再次创建。
• 如果组件已经创建或不是基于校验和派生的。

GIT 中报告的问题 https://github.com/callemall/material-ui/issues/4466

代码 https://github.com/sabha/React-Redux-Router-MaterialUI-ServerSideRendering

'warning.js:44Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) 0;text-align:center;mui-prepared:;-webki (server) 0;text-align:center;-webkit-user-select:'

Answer 1

在此Razzle Material UI Styled Example项目我以这种方式设置用户代理:

server.js :

renderToString(<Application userAgent={request.headers['user-agent']} />)

client.js :

hydrate(<Application userAgent={navigator.userAgent} />, document.getElementById('root'))

Main.js :

class Main extends Component {
    constructor(properties, context) {
        super(properties, context)

        this.muiTheme = getMuiTheme({
            userAgent: properties.userAgent
        })
    }

    render() {
        return (
            <MuiThemeProvider muiTheme={this.muiTheme}></MuiThemeProvider>
        )
    }
}

效果很好，我认为也是正确的。