ユニバーサル 反応アプリケーションを最適化しようとしています。サーバー側のレンダリングがDOM全体をリセットした後に読み込まれるbundle.jsのようです。
私の理解では、React クライアント側の JavaScript は DOM 全体をリセットするのではなく、差分を計算し、追加の DOM とイベントを既存の DOM にアタッチします。
私の bundle.js は 1.3 MB で、これは間違いなくレンダリングが遅い原因ですが、DOM 全体を再レンダリングすることは想定されていませんでした。
私の質問は、ユニバーサルレンダリングに期待される動作ですか? すべてのDOMをリセットしない方法は?
サーバー/index.js
const store = configureStore()
//****************
// App Setting
//****************
debug("Setting Application...")
const app = new Express()
app.use('/assets', Express.static('./assets'))
app.use('/build', Express.static('./build'))
app.get('*', (req, res) => {
const history = createHistory(req.originalUrl)
match({history, routes: createRoutes(store), location: req.originalUrl}, (error, redirectLocation, renderProps)=>{
const routes = createRoutes(store)
const components = (
<Provider store={store} key="provider">
<RouterContext {...renderProps} />
</Provider>
)
// React Dom Server Side Rendering
const app = ReactDOM.renderToStaticMarkup(<HTML components={components} store={store}/>)
// Response 200
res.status(200)
// Send response HTML
res.send(`<!doctype html>\n ${app}`)
})
})
app.listen(7777, () => debug('Server running on localhost:7777'))
client/index.js
let store
if (window.__REDUX_STORE__) {
store = configureStore(window.__REDUX_STORE__)
} else {
store = configureStore()
}
store.dispatch(fetchCurrentUserRequest())
render(
<Provider store={store}>
<AppRouter />
</Provider>,
document.querySelector('#content')
);
HTML.jsx
class HTML extends Component {
render(){
const { components, store } = this.props;
const content = components ? ReactDOM.renderToString(components): '';
return (
<html>
<head>
<link rel="stylesheet" href="build/style.css" />
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<div id="content" dangerouslySetInnerHTML={{__html: content}}/>
<script dangerouslySetInnerHTML={{__html: `window.__REDUX_STORE__=${serialize(store.getState())};`}} charSet="UTF-8"/>
<script src="build/bundle.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnd7VpVekR7d09azP_RQ5Bb_bQHKMkSVo&libraries=places"></script>
</body>
</html>
)
}
}
export default HTML