Deploying a React Store on SAP Hybris

Deliver a sub-second React website on SAP Hybris with Layer0

React, created and developed by Facebook, 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.

SAP Commerce Cloud, formerly known as Hybris, is a highly customizable eCommerce platform with a robust content management system. The platform offers two proprietary frontends. The first, Hybris B2C Accelerator theme, is a Responsive frontend solution while Spartacus, the second frontend, is a headless solution. Spartacus is new, so there are few proof points in production. It is, however, geared specifically for the SAP Commerce Cloud platform, so you remain locked into the platform's ecosystem. Moreover, it does not support SSR out of the box. Unlike Hybris, which is a Java based application that typically runs on a Java server like Tomcat, Spartacus SSR is Angular JavaScript which runs on Node.js. As a result, true SSR support with Spartacus requires running and maintaining a fleet of Node.js servers.

Omni Commerce Connect (OCC) is the platforms REST-based API that can be used to implement shopping, account management, checkout, and administration flows in an application. Many enterprise sites, though, have significantly customized their controller logic and those customizations may need to be re-created in client side code or the separate OCC controllers. This can add additional effort when migrating to an OCC based solution, like Spartacus. Synthetic APIs can reduce this workload, which can be found on Layer0, along with SSR and AMP technology to optimize website speed for sites running on the platform.

Layer0 lets you deliver your React storefront on SAP Commerce Cloud at sub-second speeds in a matter of hours. The average website on Layer0 see median speeds of 320ms loads, as measured by Largest Contentful Paint (LCP), an important metric in Google bases search rank. More than just a website accelerator, Layer0 is a Jamstack platform for eCommerce. Layer0 makes websites faster for users and simpler for frontend developers. The platform was built specifically for large-scale, database-driven websites such as eCommerce and Travel and includes the following benefits: 

  • Jamstack for eCommerce via 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 be run locally, in pre-prod 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 SAP Commerce Cloud store will run at instant 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 Annie Selke, a SAP Commerce Cloud website on Layer0. This mid-sized retailer is outranking eCommerce giants like Amazon, Wayfair, and Williams-Sonoma for key phrases in the search engines on Layer0 with 300ms average page loads.

Kate Spade, Planet Blue, and Shoe Carnival are more impressive examples, representing the sub-500ms page speeds attainable for React stores on Layer0.

Layer0 is also a contributor to React Storefront, an open source framework which powers over billion dollars in eCommerce revenue a year. Check it out if you are looking to re-write your eCommerce website 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