reactjs – 服务器端渲染在客户端重新渲染

server.js

const html = renderToString((
    <Provider store={store}>
      <StaticRouter basename={baseUrl} location={location} context={context}>
        <AppRoute />
      </StaticRouter>
    </Provider>
  ),null,2);

  const preloadedState = store.getState();

  res.send(renderFullPage(html,preloadedState))

client.js的index.js

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <AppRoute />
    </Router>
  </Provider>,document.getElementById('app')
);

AppRoute为客户端使用RouteAsync,为服务器使用RouteSync

AppRoute.js导入

import {App} from './RouteSync'
import {CollegeList} from './RouteSync'
import {CollegeDetail} from './RouteSync'

RouteAsync.js

export const App = asyncRoute(() => System.import('../app'));
export const CollegeList = asyncRoute(() => System.import('../apps/college/CollegeList'));
export const CollegeDetail = asyncRoute(() => System.import('../apps/college/CollegeDetail'));

RouteSync.js

export { default as App } from '../app'
export { default as CollegeList } from '../apps/college/CollegeList'
export { default as CollegeDetail } from '../apps/college/CollegeDetail'

webpack NormalModuleReplacementPlugin将RouteSync更改为RouteAsync

new webpack.NormalModuleReplacementPlugin(
      /./RouteSync$/,'./RouteAsync'
    ),

服务器渲染完成并发送给客户端.在客户端之后,SSR客户端在从devtools性能查看时再次重新呈现整个页面.

devtools “performance” image showing blank page before client re-render

我希望react只会挂钩事件监听器,而不是渲染页面.

任何建议停止在客户端重新呈现.