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

Question

我尝试使用 django、express、react 和react-router-dom 实现服务器端渲染。

服务器.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'
    ),

服务器渲染完成并发送到客户端。从 devtools 性能来看，SSR 客户端再次重新渲染整个页面后在客户端。

devtools "performance" image showing blank page before client re-render

我希望 React 只会 Hook 事件监听器，而不渲染页面。

任何停止在客户端重新渲染的建议。

Answer 1

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

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