CODEWITHSUNDEEP
reactjsreact-router-domserver-side-rendering
Roshan Shrestha
Roshan Shrestha

Reputation: 441

Server Side Render re-render at client

I trying to implement server side render with django, express, react and 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 for client.js

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <AppRoute />
    </Router>
  </Provider>,
  document.getElementById('app')
);

AppRoute uses RouteAsync for client and RouteSync for 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 render is done and send to client. At client after SSR client again re-render the whole page when viewed from devtools performance.

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

I hope react would only hook event listeners, not render the page.

Any suggestion to stop re-render in client side.

Upvotes: 6

Views: 2554

Answers (1)

Zoreslav Goral
Zoreslav Goral

Reputation: 320

I also did not find answer for this. And created my own starter. It uses react-router v4, redux, redux-saga. To prevent re-render on the client for the first link open there used hydrate method. I’ve created this based of official docs and suggestions from react-router v4 and redux. Hope it helps.

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

Upvotes: 1

Related Questions