I am trying to implement server side rendering using django, express, response and response-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 for client.js
ReactDOM.render(
<Provider store={store}>
<Router>
<AppRoute />
</Router>
</Provider>,
document.getElementById('app')
);
AppRoute uses RouteAsync for the client and RouteSync for the server
AppRoute.js import
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 changes RouteSync to RouteAsync
new webpack.NormalModuleReplacementPlugin(
/\.\/RouteSync$/,
'./RouteAsync'
),
Server processing is performed and sent to the client. On the client, after the SSR client re-displays the entire page again when viewed using devtools performance.
devtools "performance" image showing a blank page before reprocessing the client
I hope that the reaction will only catch event listeners, and not display the page.
.