An Electrode component for optionally skipping server side render of components outside of Above the fold
JavaScript
Latest commit 3696d91 Nov 3, 2016 @caoyangs caoyangs 1.0.3
Permalink
Failed to load latest commit information.
demo Update demo.jsx Sep 14, 2016
src add default export Nov 2, 2016
test oss commit Sep 12, 2016
.babelrc
.editorconfig lazy load component Aug 11, 2016
.flowconfig lazy load component Aug 11, 2016
.gitignore
.npmignore lazy load component Aug 11, 2016
.travis.yml add notifications email list Sep 19, 2016
LICENSE adding license Sep 15, 2016
README.md Add import in code examples Nov 2, 2016
components.json oss commit Sep 12, 2016
components.md oss commit Sep 12, 2016
gulpfile.js cleanup Aug 19, 2016
package.json 1.0.3 Nov 3, 2016

README.md

above-the-fold-only-server-render

NPM version Build Status Dependency Status

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

Performance

AboveTheFoldOnlyServerRender helps increase performance both by decreasing the load on renderToString and sending the end user a smaller amount of markup.

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

HTML Size renderToString Time
before 452 kB 249 ms
after 315 kB 177 ms
diff -137 kB (-30%) -72 ms (-29%)

Installation

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

Usage

By default, the AboveTheFoldOnlyServerRender component simply returns the child component. You can tell the component to skip server rendering either by passing a prop skip={true} or setting up aboveTheFoldOnlyServerRender in your app context and passing the component a contextKey prop.

You can skip server side rendering by passing a skip prop:

import { AboveTheFoldOnlyServerRender } from "above-the-fold-only-server-render";

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

You can also skip server side rendering by setting context and passing a contextKey prop:

import { AboveTheFoldOnlyServerRender } from "above-the-fold-only-server-render";

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
  })
};

Development Guide

We have an ever-green guide to our development practices with this archetype. Click here before starting development on a component library.

Scripts

To run the demo:

gulp demo

To view the demo, navigate to http://localhost:4000

To view the demo with hot reload enabled, navigate to http://localhost:4000/webpack-dev-server/

To run tests:

gulp test

To build /lib:

gulp build

npm link

When using npm link, you must delete react from zeus-components-layout/node_modules/. This is because npm link is just a symlink, not a proper npm install.

You must also run gulp build

Built with ❤️ by Team Electrode @WalmartLabs.