React loadable

React Loadable:
Code Splitting with Server Side Rendering

About me
● Former Senior Frontend Developer at Oppex
● Tech Lead at Toughbyte Ltd
● React
● github.com/northerneyes
● medium.com/@northerneyes
● twitter.com/nordfinn

Agenda
● Problem statement
● Code-Splitting
● Server Side Rendering
● Code-Splitting + Server Side Rendering
● Universal Data Fetching

Route-based splitting vs
Component-based splitting

More places to split apart our app:
● Modals
● Tabs
● Some hidden content
● And many more UI

But you can use routing as well

Small library created by
@thejameskyle
Loadable is Higher-Order
Component (HoC)

Example
import AnotherComponent from './another-component';
class MyComponent extends React.Component {
render() {
return <AnotherComponent/>;
}
}

AnotherComponent
being imported synchronously via
import

Let’s make it loaded asynchronously
state = {
AnotherComponent: null
};
componentWillMount() {
import('./another-component').then(AnotherComponent => {
this.setState({ AnotherComponent });
});
}
render() {
let {AnotherComponent} = this.state;
if (!AnotherComponent) {
return <div>Loading...</div>;
} else {
return <AnotherComponent/>;
};
}
}

Loadable
import Loadable from 'react-loadable';
function MyLoadingComponent() {
}
const LoadableAnotherComponent = Loadable({
loader: () => import('./another-component'),
LoadingComponent: MyLoadingComponent
});
render() {
return <LoadableAnotherComponent/>;
}
}

Error handling is simple
function MyLoadingComponent({ error }) {
if (error) {
return <div>Error!</div>;
} else {
}
}

Automatic code-splitting on import()

Avoiding Flash Of Loading Component

Do you remember the first slide?

Avoiding Flash Of Loading Component
export default function MyLoadingComponent({ error, pastDelay }) {
if (error) {
return <div>Error!</div>;
} else if (pastDelay) {
} else {
return null;
}
}

Easy to change delay parameter
Loadable({
LoadingComponent: MyLoadingComponent,
delay: 300
});

Preloading
let LoadableMyComponent = Loadable({
});
state = { showComponent: false };
onClick = () => {
this.setState({ showComponent: true });
};
onMouseOver = () => {
LoadableMyComponent.preload();
};
render() {
return (
<div>
<button onClick={this.onClick} onMouseOver={this.onMouseOver}>
Show loadable component
</button>
{this.state.showComponent && <LoadableMyComponent/>}
</div>
)
}
}

Rendering the web app on server and sending the complete
HTML to the client.

The client creates the HTML in memory(Virtual Dom),
checks if there are changes and re-renders the page on
client.

Better UX as user gets the complete page on first hit to the
server.

Everybody like this picture :)

Better SEO as the bots can easily index the pages

Server Side Rendering with React
is easy

React Server Rendering
import ReactDOMServer from 'react-dom/server';
ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={{}}>
<App />
</StaticRouter>
</Provider>,
);

Code-splitting + Server rendering

From react-router page:
We’ve tried and failed a couple of times. What we learned:
❏ You need synchronous module resolution on the server so you can get
those bundles in the initial render.
❏ You need to load all the bundles in the client that were involved in the
server render before rendering so that the client render is the same as the
server render. (The trickiest part, I think its possible but this is where I gave
up.)
❏ You need asynchronous resolution for the rest of the client app’s life.

How we can solve these problems?

Let’s go back to React Loadable

❏ You need synchronous module resolution on the server so you can get
up.)
✔ You need asynchronous resolution for the rest of the client app’s life.

Synchronous module resolution on the
server

Synchronous loading for the server
import path from 'path';
const LoadableAnotherComponent = Loadable({
delay: 200,
serverSideRequirePath: path.join(__dirname, './another-component')
});

✔ You need synchronous module resolution on the server so you can get
up.)
✔ You need asynchronous resolution for the rest of the client app’s life.

Yes, This is the most complicated

webpack --json > output-webpack-stats.json

Webpack stats about our bundle
let webpackStats = require('./output-webpack-stats.json');
let modules = {};
let bundles = {};
webpackStats.modules.forEach(module => {
let parts = module.identifier.split('!');
let filePath = parts[parts.length - 1];
modules[filePath] = module.chunks;
});
webpackStats.chunks.forEach(chunk => {
bundles[chunk.id] = chunk.files;
});

And special function flushServerSideRequires from react-loadable
import {flushServerSideRequires} from 'react-loadable';
let app = ReactDOMServer.renderToString(<App/>);
let requires = flushServerSideRequires();
let scripts = ['bundle-main.js'];
requires.forEach(file => {
let matchedBundles = modules[file + '.js'];
matchedBundles.forEach(bundle => {
bundles[bundle].forEach(script => {
scripts.unshift(script);
});
});
});

And the result
res.send(`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>react-loadable-example</title>
</head>
<body>
<div id="root">${app}</div>
${scripts.map(script => {
return `<script type="text/javascript" src="scripts/${script}"></script>`
}).join('n')}
</body>
</html>
`)
})

Universal Data Fetching (Redux)

Fetching is simple
class News extends React.Component {
constructor(props) {
super(props);
props.getNews();
}
render() {
const { items } = this.props.news;
return (
....
);
}
}

High order function
export default function fetch(fn) {
return (WrappedComponent) => {
class FetchOnLoad extends React.Component {
constructor(props) {
fn(this.context.store);
}
render() {
return (
<WrappedComponent {...this.props} />
);
}
}
return FetchOnLoad;
};
}

But constructor is called both on
server and client

Let’s change it
componentDidMount(props) {
fn(this.context.store);
}
render() {
return (
);
}
}
FetchOnLoad.fetch = fn;
return FetchOnLoad;
};
}

On the server
components.filter(component => Boolean(component && component.fetch))
.map(component => component.fetch(store))

The problem to have information
about these components

The solution is simple: let’s avoid
dealing with components at all

Universal fetch
const fetch = props => store => fn(store, props)
constructor(props, context) {
super(props);
if (context.fetches) {
context.fetches.push(fetch(props));
}
}
componentDidMount() {
if (!window.__INITIAL_STATE__) {
fn(this.context.store, this.props);
}
}
render() {
return (
);
}
}
return FetchOnLoad
...

On the server
function renderApp(store, req, fetches) {
return ReactDOMServer.renderToString(
<Provider store={store}>
<FetchProvider fetches={fetches}>
<App />
</FetchProvider>
</Provider>,
);
}
...
// First render to collect all fetches
const fetches = [];
renderApp(store, req, fetches);
const promises = fetches.map(fetch => fetch(store));
await Promise.all(promises);

FetchProvider
export default class FetchProvider extends React.Component {
getChildContext() {
return {
fetches: this.props.fetches
};
}
render() {
return this.props.children;
}
}
FetchProvider.propTypes = {
children: PropTypes.node.isRequired,
fetches: PropTypes.array
};
FetchProvider.childContextTypes = {
fetches: PropTypes.array
};

Conclusions
● We’ve organized Code-Splitting + Server Side Rendering for big React
application
● Plus added Universal Data Fetching

Links
Main Project Link (https://github.com/northerneyes/react-stack-playground/tree/fetching)
Webpack hot server middleware ( https://github.com/60frames/webpack-hot-server-middleware)
Interesting github account (https://github.com/faceyspacey)

Other Links
Usability Engineering, Jakob Nielsen, 1993 (https://www.nngroup.com/books/usability-engineering/)
Page Insights (https://developers.google.com/speed/pagespeed/insights/)
HTTP/2 (https://en.wikipedia.org/wiki/HTTP/2)
Webpack 2 documentation (https://webpack.js.org/)
React Loadable (https://github.com/thejameskyle/react-loadable)
Medium article (https://medium.com/@thejameskyle/react-loadable-2674c59de178)
Alternatives (https://github.com/ctrlplusb/react-async-component)
React router v4 (https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering)
Webpack 2 code-splitting (https://webpack.js.org/guides/code-splitting-async/)

George Bukhanov
● github.com/northerneyes
● medium.com/@northerneyes
● twitter.com/nordfinn
Thanks!
React Loadable:
Code Splitting with Server Side
Rendering

React loadable

More Related Content

What's hot (20)

Similar to React loadable (20)

Recently uploaded (20)

React loadable