服务器端渲染在客户端重新渲染
问题描述:
我试图用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
希望的反应只会挂钩事件侦听器,而不是渲染页面。
任何建议停止在客户端重新渲染。
答
我也没有找到答案。并创建了我自己的首发。它使用react-router v4,redux,redux-saga。为了防止在客户端重新渲染第一个打开的链接,使用了水合方法。我已经创建了基于react-router v4和redux的官方文档和建议。希望能帮助到你。
https://github.com/gzoreslav/react-redux-saga-universal-application
您是否碰巧找到解决方案?在更新到react-router 4(react-router-dom) – felguerez
后,我在我们的生产应用中遇到了这个问题。这些组件是导入窗体asyncRoute被重新渲染,但从Sync方法加载的组件不会被重新渲染。 解决方案: 1.我选择不能重新渲染的组件。 2.在RouteAsync.js文件中,那些组件按照RouteSync.js中的导入 因此,所选组件不会在客户端重新呈现。 这是我在https://reacttraining.com/react-router/web/guides/code-splitting上阅读 –
“代码拆分+服务器渲染”主题后才想到的唯一解决方案 –