tybro0103/client-index.js

## client-index.js
const isoComps = {
  'session-menu-root': SessionMenu,
};
const isoData = window.isoData || {};
Object.keys(isoData).forEach(id => {
  const props = isoData[id];
  const el = document.getElementById(id);
  const Comp = isoComps[id];
  if (props && el && Comp) {
    render(<Comp {...props} />, el);
  }
});

## isomorphic-components-session-menu.jsx
class SessionMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDropdown: false,
    };
  }

  componentDidMount() {
    'client stuff';
  }

  render() {
    const { showDropdown } = this.state;
    return (
      <div>
        <div onClick={() => {this.setState({showDropdown: !showDropdown})}}>
          rendered on server and client
        </div>
        <div className={classNames({active: showDropdown})}>
          triggered by client events
        </div>
      </div>
    );
  }
}

## server-components-main.jsx
class MainLayout extends Component {
  getIsoData() {
    return {
      'session-menu-root': {
        currentUser: this.props.currentUser,
      },
    };
  }

  renderIsoComp(id, Component) {
    const data = this.getIsoData()[id];
    return <div id={id}><Component {...data} /></div>;
  }

  render() {
    const isoData = this.getIsoData();
    const isoDataJs = `window.isoData = ${JSON.stringify(isoData)};`;
    return (
      <Html>
        <div className="header">{/*...*/}</div>
        <div className="main">
          <Whatevs />
          {this.renderIsoComp('session-menu-root', SessionMenu)}
        </div>
        <div className="footer">{/*...*/}</div>
        <script dangerouslySetInnerHTML={{ __html: isoDataJs }} />
      </Html>
    );
  }
}
	const isoComps = {
	'session-menu-root': SessionMenu,
	};
	const isoData = window.isoData \|\| {};
	Object.keys(isoData).forEach(id => {
	const props = isoData[id];
	const el = document.getElementById(id);
	const Comp = isoComps[id];
	if (props && el && Comp) {
	render(<Comp {...props} />, el);
	}
	});
	class MainLayout extends Component {
	getIsoData() {
	return {
	'session-menu-root': {
	currentUser: this.props.currentUser,
	},
	};
	}

	renderIsoComp(id, Component) {
	const data = this.getIsoData()[id];
	return <div id={id}><Component {...data} /></div>;
	}

	render() {
	const isoData = this.getIsoData();
	const isoDataJs = `window.isoData = ${JSON.stringify(isoData)};`;
	return (
	<Html>
	<div className="header">{/.../}</div>
	<div className="main">
	<Whatevs />
	{this.renderIsoComp('session-menu-root', SessionMenu)}
	</div>
	<div className="footer">{/.../}</div>
	<script dangerouslySetInnerHTML={{ __html: isoDataJs }} />
	</Html>
	);
	}
	}