• Stars
    star
    117
  • Rank 301,828 (Top 6 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An Electrode component for optionally skipping server side render of components outside of Above the fold

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.

More Repositories

1

electrode

Web applications with node.js and React
HTML
2,101
star
2

electrode-native

A platform to ease integration&delivery of React Native apps in existing mobile applications
TypeScript
725
star
3

electrode-io.github.io

The public website of the Electrode platform
HTML
336
star
4

electrode-react-ssr-caching

Optimize React SSR with profiling and component caching
JavaScript
316
star
5

electrode-explorer

An Electrode application that showcases all of your components in a live demo
JavaScript
254
star
6

electrode-electrify

Electrify is an webpack visualizer for analyzing webpack bundles.
JavaScript
230
star
7

electrode-server

Electrode's configurable web server using Hapi.js atop Node.js
JavaScript
224
star
8

electrode-ota-server

Electrode Over The Air Server for hot deployment of React Native and Cordova mobile apps
JavaScript
204
star
9

electrode-csrf-jwt

Stateless Cross-Site Request Forgery (CSRF) protection with JWT
JavaScript
126
star
10

electrode-confippet

node.js environment aware application configuration
TypeScript
108
star
11

isomorphic-loader

Webpack isomorphic loader tools to make Node require handle files like images for Server Side Rendering (SSR)
JavaScript
68
star
12

electrode-archetype-njs-module-dev

A WalmartLabs flavored NodeJS Module archetype
JavaScript
67
star
13

electrode-bundle-analyzer

Analyze your webpack deduped and minified bundle JS file.
JavaScript
66
star
14

electrode-webpack-reporter

A HTML based reporter for webpack dev server
JavaScript
59
star
15

electrode-gulp-helper

Helper functions for using gulp
JavaScript
59
star
16

electrode-check-dependencies

An Electrode module to verify component dependencies against a list
JavaScript
58
star
17

electrode-docgen

A custom metadata extractor and documentation generator for the Electrode framework
JavaScript
57
star
18

fynpo

๐Ÿ› ๏ธ๐Ÿ“ฆ a node.js monorepo manager
JavaScript
55
star
19

electrode-static-paths

Electrode server decor to serve static files
JavaScript
55
star
20

react-native-electrode-bridge

Electrode Native - Bridge
Java
44
star
21

xarc-run

npm run scripts concurrently and serially, and more.
JavaScript
42
star
22

memcache

Node.js memcached client with the most efficient ASCII protocol parser
TypeScript
37
star
23

electrode-ota-desktop

Electrode OTA Desktop Client
JavaScript
22
star
24

electrode-ota-ui

[Deprecated for electrode-ota-server/electrode-ota-ui] Electrode OTA Web/Client UI
JavaScript
17
star
25

ern-navigation

Electrode Native solution for React Native navigation
JavaScript
12
star
26

movies-reloaded-miniapp

Our new movie miniapp built on the Electrode Native Navigation.
JavaScript
10
star
27

car-buying-instructions

JavaScript
9
star
28

movielist-miniapp

Electrode Native - Movie List MiniApp (Getting Started)
Objective-C
8
star
29

fastify-server

Electrode using Fastify
TypeScript
6
star
30

moviedetails-miniapp

Electrode Native - Movie Details MiniApp (Getting Started)
JavaScript
6
star
31

electrode-keepalive

node.js HTTP agent with customized keep alive
JavaScript
6
star
32

kax

TypeScript
5
star
33

react-native-livebundle

LiveBundle Native Module
Java
3
star
34

livebundle

LiveBundle CLI
TypeScript
3
star
35

electrode-native-starter-manifest

Electrode Native - Starter Manifest
3
star
36

react-native-ernnavigation-api

Electrode Native - Navigation API (Getting Started)
Swift
3
star
37

electrode-native-manifest

Electrode Native - Master Manifest
Java
3
star
38

electrode-native-showcaseapp-android

Native application that showcases electrode native MiniApps and APIs.
Java
2
star
39

electrode-native-sample-cauldron

Sample Electrode Native Cauldron
2
star
40

fynpo-old

Supplement tools for using fyn with lerna
JavaScript
2
star
41

car-buying-service

mock service for car buying app
JavaScript
2
star
42

car-buying

A sample car buying app
JavaScript
2
star
43

ern-bundle-store

Electrode Native Bundle Store Server
TypeScript
2
star
44

electrode-native-website

The site and docs for Electrode Native
JavaScript
2
star
45

react-native-ernmovie-api

Electrode Native - Movie API (Getting Started)
Swift
2
star
46

ernnavigation-api-impl-native

Native implementation of ernnavigation-api
Objective-C
2
star
47

electrode-demo-app

Demo application generated by Electrode platform unmodified
JavaScript
1
star
48

react-native-ernmovie-api-impl

Objective-C
1
star
49

ern-sourcemap-store

Electrode Native sourcemap store server
TypeScript
1
star
50

electrode-native-binarystore

Electrode Native - Binary Store
JavaScript
1
star
51

ern-container-transformer-xcframework

Electrode Native XCFramework Container Transformer
Shell
1
star
52

ern-container-publisher-maven

Electrode Native Maven Container Publisher
TypeScript
1
star
53

resolve-alias

set virtual module aliases for resolve and require
JavaScript
1
star
54

ern-base-composite-starter

Electrode Native Base Composite Starter
JavaScript
1
star
55

electrode-native-showcaseapp-ios

Swift
1
star
56

react-native-ernmovie-api-impl-js

JavaScript
1
star