How to do code splitting with ReactQL?

Question

Out of the box, ReactQL comes with a couple "pages" defined like this:

export default () => (
  <div>
    <Helmet
      title="ReactQL application"
      meta={[{
        name: 'description',
        content: 'ReactQL starter kit app',
      }]} />
    <div className={css.hello}>
      <img src={logo} alt="ReactQL" className={css.logo} />
    </div>
    <hr />
    <GraphQLMessage />
    <hr />
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/page/about">About</Link></li>
      <li><Link to="/page/contact">Contact</Link></li>
    </ul>
    <hr />
    <Route exact path="/" component={Home} />
    <Route path="/page/:name" component={Page} />
    <hr />
    <p>Runtime info:</p>
    <Stats />
    <hr />
    <p>Stylesheet examples:</p>
    <Styles />
  </div>
);

However, Home and Page are just components defined in the same file. Supposing I don't want to load all that code until you navigate to that page, how do I "code-split" and move each of those pages into a separate webpack chunk?

Note that ReactQL supports SSR and React-Router supposedly does not. Is what I'm asking possible?

Answer 1

See this issue for an example of code-splitting and SSR at work.

I'm currently working on a guide and a helper component that would go one step further, and provide some boilerplate to do this in a more routine fashion.

It's certainly possible with React Router: See https://reacttraining.com/react-router/web/guides/code-splitting

Will update https://reactql.org and post an update on here when complete.