I am trying to optimize my universal react application. It seems bundle.js which is read after server side rendering resets the whole DOM.
My understanding was that React client side javascript does not reset the whole DOM but calculates diff and attaches additional DOM and event on existing DOM.
My bundle.js is 1.3 MB which is definitely the cause of slow rendering but I was not expected re-render whole DOM.
My question is Is it expected behavior for universal rendering? and how to not reset all DOM?
server/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