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:

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

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} 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.

results matching ""

    No results matching ""