Salesforce Decode
Salesforcedecode
Back to questions
Headless 360Architect (Hardest)reactscapicommerce-apiheadless

Architect custom React storefront consuming Commerce Cloud SCAPI

Real World Scenario

Engineering rebuilds flagship.com in Next.js React while retaining Salesforce B2C Commerce for basket, pricing, and checkout. SEO and Core Web Vitals are board-level KPIs.

Expected Answer

• Separate React app concerns: SSR for PLP/PDP SEO, client hydration for interactive cart • Use SLAS for shopper auth with secure token storage and refresh in httpOnly cookies where possible • Implement BFF layer aggregating SCAPI calls reducing client chattiness and hiding API secrets • Cache product catalog with tag-based invalidation on price and inventory webhooks • Design optimistic UI for cart updates with server reconciliation on SCAPI response • Handle locale and currency via SCAPI site context parameters consistently server and client • Observability tracing from React through BFF to SCAPI with correlation IDs

Follow-Up Questions & Answers

Click to expand — each follow-up includes a direct, interview-ready answer

Main difference: use case and scale. Separate React app concerns: SSR for PLP/PDP SEO, client hydration for interactive cart. Use SLAS for shopper auth with secure token storage and refresh in httpOnly cookies where possible. Pick based on your integration pattern and team capability. React headless succeeds with BFF boundary—never expose all SCAPI complexity and secrets directly to browser bundles. Document the decision in an ADR and align with enterprise standards.

Architect Perspective

React headless succeeds with BFF boundary—never expose all SCAPI complexity and secrets directly to browser bundles.