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

Question

我试图用django,express,react和react-router-dom实现服务器端渲染.

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"性能"图像在客户端重新呈现之前显示空白页

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

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

Answer 1

我也没有找到这个问题的答案。并创建了我自己的开胃菜。它使用react-router v4、redux、redux-saga。为了防止在客户端上重新渲染第一个打开的链接，使用了水合物方法。我\xe2\x80\x99根据官方文档以及react-router v4和redux的建议创建了这个。希望能帮助到你。

\n\n

https://github.com/gzoreslav/react-redux-saga-universal-application

\n