React isomorphic client side DOM?

Question

My server is using renderToString() to render my react router based app.

// isomorphic route
app.get('/*', (req, res) => {

  let history = useQueries(createMemoryHistory)();
  // let store = configureStore();
  let routes = createRoutes(history);
  let location = history.createLocation(req.url);

  match({routes, location}, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      let content = renderToString(<RouterContext {...renderProps} />);
      res.render('main', {content: content});
    } else {
      res.status(404).send('Not found')
    }
  });
});

The createRoutes file

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import HomeView from './views/HomeView'
import VideoView from './views/VideoView'

export default (history) => {
  return (
    <Router history={history}>
      <Route path="/" component={HomeView}></Route>
      <Route path="/v/:id" component={VideoView}></Route>
    </Router>
  )
}

Since I am using RouterContext on the server, my question is how do I wire up the client side to allow react's own events to be accessible and "fireable" again on the client side

import React from 'react';
import ReactDom from 'react-dom';
import { Router, hashHistory} from 'react-router';  
import createRoutes from '../2-shared/routes';

ReactDom.render(// RouterContext??, document.getElementById('app'));

I am not really sure what to do here in terms of enabling the client side to listen to lifecycle events from the component like componentDidMount() currently my console.log's are all going to the server, and nothing is being listened to on the client.

Having a similar issue to react componentDidMount not firing

Thanks

You'll have to have your views load the JS on the client side, also. — Ezra Chang, May 27 '16 at 08:06

score 0 · Answer 1 · answered Jun 07 '16 at 05:27

Given that you are developing an isomorphic app, you would load JS on both client and server side. Client side will re-render the app and, if everything is ok, will not even touch DOM because there will be no updates. However, it will wire all your event listeners properly.

componentDidMount will never fire on the server side because it never really does get mounted. componentWillMount will fire normally on server, though.

React isomorphic client side DOM?

1 Answers1