Decoding Storefront Next: What SFRA and PWA Kit Developers Actually Need to Know

The evolution of Salesforce B2C Commerce frontends: From monolithic SFRA cartridges and Bootstrap to isomorphic PWA Kit (React + Chakra UI), and finally the zero-runtime optimization of Storefront Next (React + Vite + Tailwind CSS).

A No-BS Architectural Survival Guide for the Seasoned Salesforce Commerce Cloud Engineer

If you have spent the last decade deep in the trenches of Salesforce Commerce Cloud (B2C), your muscle memory is hardcoded for a very specific flavor of web development. You know exactly how to handle ISML templates, you can debug a remote include or an SFRA cartridge controller in your sleep, and you have survived the platform’s multi-generational shift to the Storefront Reference Architecture (SFRA).

But the ground under our feet has shifted permanently. If you are like me, you probably spent the last couple of years wrapping your head around headless commerce via the PWA Kit ecosystem, only to wake up to a new milestone paradigm: Storefront Next.

When you read the official press releases, it is easy to get lost in the marketing hyperbole about “composable speed” and “seamless headless agility.” But as hands-on developers, we do not care about the slide decks. We care about how data is fetched, how local environments are built, how code is packaged, and how our technical execution changes on Monday morning. Let’s strip away the fluff and look at what this evolution actually means to a seasoned SFCC architect.

The Three Waves: A Developer’s Reality Check

To understand where we are going, we need to accurately map where we have been. The evolution of the SFCC front-end boils down to three distinct architectural waves:

The Architectural Reality Shift: Shifting the UI Engine

The biggest hurdle for an SFRA developer moving to PWA Kit or Storefront Next is recognizing that the rendering layer and the data layer have been completely decoupled. You cannot compare React storefront files to SFRA controllers apples-to-apples because they occupy entirely different operational layers.

In SFRA, your controllers executed directly on the core Salesforce instance, bound tightly to template rendering engines.

In a modern headless Salesforce architecture (PWA Kit and Storefront Next), the application architecture is divided into two distinct responsibilities:

1. The Presentation Layer (Managed Runtime)

When a user requests a page, an Express.js application executes on the Salesforce Managed Runtime (MRT). Its sole job is to act as a lightweight orchestration engine. It renders the server-side React shell (Isomorphic React), bundles the client-side UI logic, and sends the compiled JavaScript to the browser to handle fluid user interactions.

2. The Data Layer (SCAPI / OCAPI Helper Packages)

Instead of executing backend scripts inside a controller to fetch data, the React storefront leverages frontend helper SDKs, specifically **@salesforce/commerce-sdk-react. These packages wrap SCAPI (Salesforce Commerce API) or OCAPI** endpoints seamlessly into standard React hooks (like useProduct or useBasket). The React frontend handles the presentation state and initiates HTTP requests directly to the headless APIs to hydrate the user interface.

3. The Backend Layer (Traditional SFCC Script Hooks)

Here is the catch that marketing slides often leave out: Headless storefronts do not eliminate the need for standard SFCC backend development. If you need to inject custom business logic, handle proprietary tax calculations, or alter how an order is processed during a basket calculation, you are still writing traditional B2C backend JavaScript. You configure these modifications via standard platform hooks (configured via hooks.json on the core instance) to extend the default behavior of SCAPI and OCAPI endpoints. Your domain expertise in server scripts and business logic remains entirely relevant—it just acts as a pure API layer now.

Wave 2 to Wave 3: The Refinement of Storefront Next

If PWA Kit introduced the modern headless paradigm, Storefront Next is the brutal, performance-minded optimization of it. It retains the exact same underlying SCAPI helper hook structures, but strips away the technical debt of early PWA Kit frameworks.

Shifting from Chakra UI to Tailwind CSS

PWA Kit launched with Chakra UI. While highly modular, Chakra relies heavily on runtime CSS-in-JS; the browser’s JavaScript engine must dynamically compute layout styles on the fly. On massive e-commerce category pages, this severely slows down Google Lighthouse and Core Web Vitals performance.

Storefront Next replaces Chakra with Tailwind CSS, shifting styling from runtime to compile-time. Tailwind parses your utility classes during the build step, spitting out a tiny, static, highly cacheable CSS asset. The browser handles it natively, freeing up the JavaScript thread.

Replacing Webpack with Vite

If you are tired of running a local development server and waiting a painful eternity for a minor component change to push through Webpack hot reloads, this is where Storefront Next wins. By swapping Webpack for Vite, local development becomes instantaneous via native ESM, boosting day-to-day developer velocity.

// Obsolete: Old SFRA Monolithic Controller (Tightly Bound to UI Template)
server.get('Show', function (req, res, next) {
    var ProductFactory = require('*/cartridge/scripts/factories/product');
    var product = ProductFactory.get(req.querystring);
    res.render('product/productDetails', { product: product });
    next();
});

// Current: Modern Storefront Next React Component (Decoupled & Fetching via SCAPI Helper Hooks)
import { useProduct } from '@salesforce/commerce-sdk-react';

export default function ProductCard({ id }) {
    // Helper SDK fetches directly from SCAPI behind the scenes
    const { data: product, isLoading } = useProduct({ params: { id } });
    if (isLoading) return <div className="animate-pulse bg-gray-200 h-48 w-full" />;

    return (
        // Notice the class names look familar to bootstrap.  This is Tailwind CSS. 
        <div className="p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition">
            <h3 className="text-lg font-bold text-slate-800">{product.name}</h3>
            <p className="text-sm text-emerald-600 font-semibold">{product.price}</p>
        </div>
    );
}

Moving From Legacy Cartridges to CAP

For decades, third-party integrations (payment processors, ratings/reviews, address verification) were distributed as zipped cartridges dropped onto an overlay cartridge path.

Storefront Next firmly transitions the platform to Commerce App Packages (CAP). Instead of wrestling with cartridge priority strings or overriding core controller files, integrations are packaged cleanly as modern modular plugins or Vite wrappers that conform to strict boundaries, making upgrade paths far less volatile.

Architectural Advantage: Storefront Next supports hybrid storefront architectures. You do not have to migrate a massive legacy SFRA storefront in a single monolithic rewrite. You can configure CDN routing on the Managed Runtime to serve highly optimized, Tailwind-powered content pages headless, while leaving your complex checkout pages running safely on your existing SFRA architecture.

Protecting Your Career Strategy

If your entire resume is built on SFRA, your deep domain knowledge of Salesforce’s underlying commerce logic — price book structures, promotion engine prioritization, inventory allocation, and order states — remains your strongest asset. The foundational business rules haven’t changed; only the delivery presentation layer has.

To keep your edge as the platform moves forward, focus on mastering these structural layers:

1. Master Utility-First Layouts (Tailwind CSS): Understand compile-time style optimization and how to structure clean responsive interfaces without massive runtime libraries.
2. Deep Dive into Modern React Architecture: Get completely comfortable with asynchronous hooks, state hydration, and isomorphic rendering patterns.
3. Become an Expert on SCAPI Hooks: Learn how to customize and extend the Salesforce Commerce API on the core backend by mastering platform script hooks.

Transitioning away from classic MVC controllers can feel daunting, but once you move past the setup hurdle, writing clean React code backed by zero-runtime styling and instant Vite feedback is an exponentially better engineering experience. It’s time to step out of the legacy cartridge environment and step into standard modern web architecture.