Edit on GitHub

Above The Fold Rendering

The above-the-fold-only-server-render 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.

above-the-fold-only-server-render is a standalone module. It is agnostic of your web-server framework. In this tutorial we will demonstrate how to use this module in Electrode, Express.js and Hapi.js applications.

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:

above-the-fold-table

Module: above-the-fold-only-server-render #

Install via npm #

$ 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} prop 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 prop:

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 can be used with your favorite node.js server framework Electrode, Express.js, or Hapi.js.