Deploying a React Store on HCL Commerce

Deliver a sub-second React website on HCL Commerce with Layer0

Created and developed by Facebook, React is one of the most popular open-source JavaScript libraries for building user interfaces or UI components quickly and easily, using a component-based approach. React offers great runtime performance and is fit to be the backbone of complex, revenue-generating websites with heavy traffic, such as eCommerce and Travel websites..

React offers some benefits compared to the other popular frontend frameworks out there, including:

  • Virtual DOM: Nodes are re-rendered only as needed. React compares new data to original DOM and updates the View automatically. This enhances the performance of all-sizes applications that need regular content updates.
  • One-way data binding: React uses one-way data binding with an application architecture called Flux controls. React helps update the View for the user and Flux controls the application workflow.
  • Support for bundling and tree-shaking: This helps minimize the end user’s resource load.
  • Built-in server-side rendering (SSR) support: SSR offers speed gains in specific implementations.

HCL Commerce, previously known as IBM WebSphere, is built specifically for enterprise level B2B eCommerce. It offers great scalability, flexible catalogue management, deployments and personalization on multi/macro sites. HCL Commerce is a cloud-based, API-first (REST and SDKs) platform that offers two proprietary frontends: React Reference Storefront and Java JSP Storefront. The Reference Storefront is a new, closed-source proprietary frontend meant to keep you on the platform.

HCL Commerce supports both headless and monolithic/traditional architectures. HCL's Standard Architecture is designed to separate individual frontend storefronts from the backend servers, leading to increased security, scalability, flexibility and improves the ease of development and deploys. This Standard Architecture uses traditional Java JSP server-side rendering (SSR), while the second architecture, React Store Architecture, does not. React Store Architecture is based on a Single Page Application (SPA) model, which is a client-centric headless Store which makes API calls. but does not currently support SSR. Furthermore, neither architectures support PWA or AMP out of he box, significantly hindering website performance.

Layer0 lets you deliver React stores on HCL Commerce for sub-second speeds with every load. The average website on Layer0 sees median page loads of 399ms, measured by Largest Contentful Paint (one of Google's three Core Web Vitals). However, Layer0 is much more than a website accelerator. It is a Jamstack platform for eCommerce at scale. Layer0 makes websites faster for users and simpler for frontend developers to maintain. Built specifically for large-scale, database-driven websites (such as eCommerce and Travel), it brings the following benefits: 

  • Jamstack for eCommerce via both pre and just-in-time rendering
  • Zero latency networking via prefetching of data from your product catalog APIs
  • An edge that can be configured natively in your React app (CDN-as-JavaScript)
  • Edge rules that can run locally, in pre-production and production environments  
  • Automated, full-stack preview URLs from GitHub, GitLab, or Bitbucket with every new branch and push
  • Performant split tests at the edge and A/B tests that do not slow down the site, canary deploys, and personalization
  • Serverless JavaScript that is much easier and more reliable than AWS Lambda

With Layer0, your React Magento store will run in sub-second speeds and your developers will be empowered to control edge caching and reduce rework using the various developer productivity tools that come with the platform.

Check out J.Jill, a sub-second HCL Commerce storefront on Layer0. The retailer delivers 390ms average page loads across its site. Kate Spade, Planet Blue, and Shoe Carnival are more impressive examples, as these are React stores delivering sub-500ms page loads on Layer0.

Layer0 is also a contributor to React Storefront, an open source eCommerce framework which powers over billion dollars in eCommerce revenue a year. Check it out if you are looking to re-write your eCommerce site into a blazingly fast site. Or if you're currently using React for your frontend, use the this guide to deploy your React application on Layer0 and get sub-second loads in as little as 1 hour of work. 

Deploy in minutes

Moovweb XDN works with all frontends
Deploy freeTakes 2 minutes