服務器端渲染在客戶端重新渲染

我試圖用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

服務器端渲染在客戶端重新渲染

回答

相關問題