The above-the-fold-only-server-render module is a React component for optionally skipping server side rendering of components outside above-the-fold (or inside of the viewport). This component helps render your components on the server that are above the fold and the remaining components on the client.

This module is a stand-alone module and can be configured to work in any Electrode, Express, or Hapi application.

Why do we need this module?

The table below outlines a clear performance increase in the example app by skipping server rendering of the Footer component and several other below-the-fold zones on Walmart.com:

Install vianpm

$ npm install --save above-the-fold-only-server-render

Example Applications

Usage

The Above-the-fold component is used as a wrapper. After wrapping your react components in the AboveTheFoldOnlyServerRender wrapper, you can skip server side rendering on those components and save on CPU render time by passing a skip={true} property to the wrapper component:

const SomeComponent = () => {
return (
<AboveTheFoldOnlyServerRender skip={true}>
<div>This will skip server side rendering.</div>
</AboveTheFoldOnlyServerRender>
);
};

Alternatively, you can set up aboveTheFoldOnlyServerRender in your app context and pass the AboveTheFoldOnlyServerRender wrapper a contextKey property:

const SomeComponent = () => {
return (
<AboveTheFoldOnlyServerRender contextKey="aboveTheFoldOnlyServerRender.SomeComponent">
<div>This will not be server side rendered based on the context.</div>
</AboveTheFoldOnlyServerRender>
);
};
class SomeApp extends React.Component {
getChildContext() {
return {
aboveTheFoldOnlyServerRender: {
SomeComponent: true
}
};
}
render() {
return (
<SomeComponent />
);
}
}
SomeApp.childContextTypes = {
aboveTheFoldOnlyServerRender: React.PropTypes.shape({
AnotherComponent: React.PropTypes.bool
})
};

By default, the above-the-fold-only-server-render component is an exercise in simplicity; at a high-level it returns the child component that it wraps around.

Supported Platforms

This module is web-server platform agnostic and can be used with your favorite node.js server framework Electrode, Express.js, or Hapi.js.