page.js

import { PropTypes, Children } from 'react';
import classNames from 'classnames';

/**
 * Defines whether it's server or client side rendering environment (can use DOM client side)
 *
 * @type {Boolean}
 */
const canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

/**
 * Page component
 * On server side renders the children components above the fold only
 *
 * @param {Object} props  Component properties
 * @return {ReactElement} Page component React element
 */
function Page(props) {
    const pageClassName = classNames('page', props.className);
    let newChildren;

    if (canUseDOM) {
      newChildren = props.children;
    } else {
      let metTheFold = false;
      newChildren = [];

      Children.forEach(props.children, (child) => {
        if (metTheFold) return;

        if (child.isTheFold) {
          metTheFold = true;
          return;
        }

        newChildren.push(child);
      });
    }

    return (
      <div className={pageClassName}>
        {newChildren}
      </div>
    );
  }
}

/**
 * Page component propTypes definition
 *
 * @type {Object}
 */
Page.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string
};

export default Page;