Server Side Render Caching + Profiling

Server Side Render Caching + Profiling

Use the The electrode-react-ssr-caching module to optimize React SSR with profiling and component caching.

The electrode-react-ssr-caching module supports profiling React Server Side Rendering time to enable component caching to help you speed up Server Side Rendering of your components.

This module is a stand-alone module and can be configured to work in any Electrode, Express.js, or Hapi.js application.

Install vianpm

$ npm install --save electrode-react-ssr-caching

Example Applications



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 />);
const html = renderToString(<MyComponent />);
console.log(JSON.stringify(SSRCaching.profileData, null, 2));


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

The basic steps to enabling caching are:

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

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


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

For example:

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

Caching Strategies


The simplecaching 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 component instance with different props. However it requires very little processing time.


Thetemplatecaching strategy is more complex but flexible.

The idea is similar to generating logic-less handlebars templates 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.message}</div>

And you render it with props:

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

The following HTML string is returned:

<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 and @1@ refers to props.message:

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

An HTML string is returned. This could be similar to a handlebars template:

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

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

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

That's the idea of the template strategy. Of course there are small details such as handling the encoding of special characters, preserving properties that can't be tokenized, avoiding tokenizing non-string properties, or preservingdata-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 the 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.


Enable profiling according to flag

  • undefinedor true- enable profiling

  • false- disable profiling

Enable cache according to flag

  • undefined or true- enable caching

  • false- disable caching

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

Set the caching configuration toconfig.

Removehttp:orhttps:from prop values that are URLs according to flag.

Caching must be enabled for this to have any effect.

  • undefinedor true- strip URL protocol

  • false- don't strip

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.

Clear profiling data

Clear caching data

Get total number of cache entries

Print out cache entries and number of hits each one has.