React bundle.js resets whole DOM created by server side rendering

162 views Asked by At

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?

enter image description here

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
0

There are 0 answers