• Stars
    star
    316
  • Rank 132,587 (Top 3 %)
  • 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

Optimize React SSR with profiling and component caching

electrode-react-ssr-caching NPM version Build Status Dependency Status

Support profiling React Server Side Rendering time and component caching to help you speed up SSR.

Installing

npm i electrode-react-ssr-caching

Usage

Note that since this module patches React's source code to inject the caching logic, it must be loaded before the React module.

For example:

import SSRCaching from "electrode-react-ssr-caching";
import React from 'react';
import ReactDOM from 'react-dom/server';

Profiling

You can use this module to inspect the time each component took to render.

import SSRCaching from "electrode-react-ssr-caching";
import { renderToString } from "react-dom/server";
import MyComponent from "mycomponent";

// First you should render your component in a loop to prime the JS engine (i.e: V8 for NodeJS)
for( let i = 0; i < 10; i ++ ) {
    renderToString(<MyComponent />);
}

SSRCaching.clearProfileData();
SSRCaching.enableProfiling();
const html = renderToString(<MyComponent />);
SSRCaching.enableProfiling(false);
console.log(JSON.stringify(SSRCaching.profileData, null, 2));

Caching

Once you determined the most expensive components with profiling, you can enable component caching this module provides to speed up SSR performance.

The basic steps to enabling caching are:

import SSRCaching from "electrode-react-ssr-caching";

SSRCaching.enableCaching();
SSRCaching.setCachingConfig(cacheConfig);

Where cacheConfig contains information on what component to apply caching. See below for details.

In order for the enableCaching() method to work, you'll also need NODE_ENV set to production, or else it will throw an error.

cacheConfig

SSR component caching was first demonstrated in Sasha Aickin's talk.

His demo requires each component to provide a function for generating the cache key.

Here we implemented two cache key generation strategies: simple and template.

You are required to pass in the cacheConfig to tell this module what component to apply caching.

For example:

const cacheConfig = {
    components: {
        "Component1": {
            strategy: "simple",
            enable: true
        },
        "Component2": {
            strategy: "template",
            enable: true
        }
    }
}

SSRCaching.setCachingConfig(cacheConfig);

Caching Strategies

simple

The simple caching strategy is basically doing a JSON.stringify on the component's props. You can also specify a callback in cacheConfig to return the key.

For example:

const cacheConfig = {
    components: {
        Component1: {
            strategy: "simple",
            enable: true,
            genCacheKey: (props) => JSON.stringify(props)
        }
    }
};

This strategy is not very flexible. You need a cache entry for each different props. However it requires very little processing time.

template

The template caching strategy is more complex but flexible.

The idea is akin to generating logic-less handlebars template from your React components and then use string replace to process the template with different props.

If you have this component:

class Hello extends Component {
    render() {
        return <div>Hello, {this.props.name}.  {this.props.message}</div>
    }
}

And you render it with props:

const props = { name: "Bob", message: "How're you?" }

You get back HTML string:

<div>Hello, <span>Bob</span>.  <span>How&#x27;re you?</span></div>

Now if you replace values in props with tokens, and you remember that @0@ refers to props.name and @1@ refers to props.message:

const tokenProps = { name: "@0@", message: "@1@" }

You get back HTML string that could be akin to a handlebars template:

<div>Hello, <span>@0@</span>.  <span>@1@</span></div>

We cache this template html using the tokenized props as cache key. When we need to render the same component with a different props later, we can just lookup the template from cache and use string replace to apply the values:

cachedTemplateHtml.replace( /@0@/g, props.name ).replace( /@1@/g, props.message );

That's the gist of the template strategy. Of course there are many small details such as handling the encoding of special characters, preserving props that can't be tokenized, avoid tokenizing non-string props, or preserving data-reactid and data-react-checksum.

To specify a component to be cached with the template strategy:

const cacheConfig = {
    components: {
        Hello: {
            strategy: "template",
            enable: true,
            preserveKeys: [ "key1", "key2" ],
            preserveEmptyKeys: [ "key3", "key4" ],
            ignoreKeys: [ "key5", "key6" ],
            whiteListNonStringKeys: [ "key7", "key8" ]
        }
    }
};
  • preserveKeys - List of keys that should not be tokenized.
  • preserveEmptyKeys - List of keys that should not be tokenized if they are empty string ""
  • ignoreKeys - List of keys that should be completely ignored as part of the template cache key.
  • whiteListNonStringKeys - List of non-string keys that should be tokenized.

API

enableProfiling(flag)

Enable profiling according to flag

  • undefined or true - enable profiling
  • false - disable profiling

enableCaching(flag)

Enable cache according to flag

  • undefined or true - enable caching
  • false - disable caching

enableCachingDebug(flag)

Enable cache debugging according to flag.

Caching must be enabled for this to have any effect.

  • undefined or true - enable cache debugging
  • false - disable cache debugging

setCachingConfig(config)

Set caching config to config.

stripUrlProtocol(flag)

Remove http: or https: from prop values that are URLs according to flag.

Caching must be enabled for this to have any effect.

  • undefined or true - strip URL protocol
  • false - don't strip

shouldHashKeys(flag, [hashFn])

Set whether the template strategy should hash the cache key and use that instead.

Caching must be enabled for this to have any effect.

  • flag
    • undefined or true - use a hash value of the cache key
    • false - don't use a hash valueo f the cache key
  • hashFn - optional, a custom callback to generate the hash from the cache key, which is passed in as a string
    • i.e. function customHashFn(key) { return hash(key); }

If no hashFn is provided, then farmhash is used if it's available, otherwise hashing is turned off.

clearProfileData()

Clear profiling data

clearCache()

Clear caching data

cacheEntries()

Get total number of cache entries

cacheHitReport()

Returns an object with information about cache entry hits

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-explorer

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

electrode-electrify

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

electrode-server

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

electrode-ota-server

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

electrode-csrf-jwt

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

above-the-fold-only-server-render

An Electrode component for optionally skipping server side render of components outside of Above the fold
JavaScript
117
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