Using Electrode to Improve React Server Side Render Performance By Up To 70%

Alex Grigoryan
Oct 10, 2016 · 3 min read

We built Electrode, the react/node.js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance.

We use server side rendering for almost all of our applications for two reasons:

  1. Improved performance for the customer
  2. Better for SEO

In our tests, however, we found that React’s renderToString() takes quite a while to execute — and since renderToString() is synchronous, the server is blocked while it runs. Every server side render executes renderToString() to build the HTML that the application server will be sending to the browser.

To solve this problem, we created two Electrode modules: Above the Fold Render (ATF) and Server Side Render Profiling and Caching (SSR Caching). Let’s take a look at how these work, using the Walmart.com homepage application as our use case. This is the real homepage application, not a mocked app. It includes 10 carousels (lots of deals!), and it already uses our performance-enhancing redux-router-engine. For the purpose of testing, it’s running on a Macbook Pro, not on commodity server hardware (this makes a big difference in renderToString() performance).

Baseline

Electrode Default — renderWithIds:False

Server Side Render Profile and Caching

Above The Fold Render

SSR Caching + ATF Render

Conclusion

But keep in mind that these tests were ran on fast hardware. On commodity server CPUs, renderToString() can take twice as long. That means a 70% improvement won’t mean 90 ms, but 180 ms saved.

Special Thanks:

To Caoyang Shi, for helping to gather data and ensuring we’re getting the right numbers!

More Information:

Check out my post about the release of Electrode, the customer-facing platform that powers Walmart.com.

The Electrode website: www.electrode.io

Walmart Global Tech Blog

We’re powering the next great retail disruption.