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

我试图用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))

index.js为client.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'

Ro uteAsync.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

希望的反应只会挂钩事件侦听器，而不是渲染页面。

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

来源

2017-07-30 Roshan Shrestha

您是否碰巧找到解决方案？在更新到react-router 4（react-router-dom） – felguerez

后，我在我们的生产应用中遇到了这个问题。这些组件是导入窗体asyncRoute被重新渲染，但从Sync方法加载的组件不会被重新渲染。解决方案： 1.我选择不能重新渲染的组件。 2.在RouteAsync.js文件中，那些组件按照RouteSync.js中的导入因此，所选组件不会在客户端重新呈现。这是我在https://reacttraining.com/react-router/web/guides/code-splitting上阅读 –

“代码拆分+服务器渲染”主题后才想到的唯一解决方案 –

我也没有找到答案。并创建了我自己的首发。它使用react-router v4，redux，redux-saga。为了防止在客户端重新渲染第一个打开的链接，使用了水合方法。我已经创建了基于react-router v4和redux的官方文档和建议。希望能帮助到你。

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

来源

2017-12-13 22:15:14

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

回答

相关问题