-
Notifications
You must be signed in to change notification settings - Fork 174
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR + code-splitting #3
Comments
Thanks @kuka. Code-splitting on the server should actually work out-the-box. Because we're using Webpack 2 to generate bundles on both the client and the server, any strategy that uses The one thing that's currently missing is a built-in HOC for returning a 'loading' component whilst split code hasn't yet returned back from its round-trip, and a recommended pattern in the docs for doing the actual split. In the meantime, I whipped together this very quick example to demonstrate it working in practice: Let's say you have this: src/test.js export default 'code-splitting for the win!'; And then inside src/app.js, we modify the class Message extends React.PureComponent {
constructor() {
super();
this.state = {
message: '',
};
}
componentDidMount() {
import('./test').then(mod => {
this.setState({
message: mod.default,
});
});
}
render() {
return (
<div>
<h2>Message from code-splitting: <em>{this.state.message}</em></h2>
</div>
);
}
} Running And you can see the network request that grabbed this asynchronously: Now, the neat this is that you also get this on the server, too - running Browser files generated
And on the server, too
Of course, in this example, the Since In a (soon-ish) future version, I'll add those features to the starter kit, and update |
Thank you for a concise reply, Lee! What you’ve written is going to tremendously help in my and others’ situations. I consider this closed. |
Can you split vendor.js based on the routes which require it? Edit: actually I see it will already do this. But I'm not quite sure how to get code splitting working on server rendering too, since I call import in componentDidMount? |
@scf4 - are you able to share the code for what you're trying to do? Code splitting should work on the server in exactly the same way (i.e. you can use |
@leebenson I'm using this example pretty much: https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194 The server still renders everything else, it just doesn't load the async loaded component. So disabling JS means you can't see the async loaded component. |
@scf4 - this actually works in production, but not via the new dev server: test.js import React from 'react';
export default () => (<h1>Test!</h1>); app.js // ...
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
AsyncComponent.Component = Component;
this.setState({ Component });
});
}
}
render() {
const { Component } = this.state;
if (Component) {
return <Component {...this.props} />;
}
return null;
}
};
}
const Test = asyncComponent(() =>
import('./test').then(module => module.default),
);
// Export a simple component that allows clicking on list items to change
// the route, along with a <Route> 'listener' that will conditionally display
// the <Page> component based on the route name
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 />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/page/:name" component={Page} />
<Route path="/test" component={Test} />
<Route component={NotFound} />
</Switch>
<hr />
<p>Runtime info:</p>
<Stats />
<hr />
<p>Stylesheet examples:</p>
<Styles />
</div>
);
// ... I'm tracking this in reactql/kit#30 |
@leebenson Thanks Lee, I'll give that asyncComponent function a try now. Edit: it worked, thank you 😄 |
cool @scf4 👍 react-async-component looks like a good way to handle code-splitting. I haven't tried it, but it should work with the ReactQL webpack flow. |
Hey @leebenson!
Nice starter kit! I have a similar setup with SSR based on
react-router@3
and everything works fine. I aim to refactor in the near future and this setup looks great for that. Wondering what your thoughts are on SSR + code-splitting with v4?The text was updated successfully, but these errors were encountered: