Saleor Storefront addresses a classic e-commerce problem: delivering product and category pages fast while ensuring cart and checkout data remain up-to-date and accurate. Instead of choosing fully static or fully dynamic rendering, it adopts a hybrid caching model that balances user experience and data freshness — a challenge many storefronts get wrong.
What Saleor Storefront does and how it is built
Saleor Storefront is the minimal, production-ready headless storefront template maintained by Saleor. It’s built on a modern frontend stack: Next.js 16 with the App Router, React 19, TypeScript in strict mode, and styled using Tailwind CSS. The storefront communicates with a Saleor backend via GraphQL APIs.
Its core architectural principle is a display-cached/checkout-live pattern:
Product and category pages use Incremental Static Regeneration (ISR) with a 5-minute time-to-live (TTL). This means these pages are statically generated but refreshed every 5 minutes, ensuring near-instant page loads and strong Core Web Vitals metrics essential for SEO and user experience.
Cart and checkout pages bypass the cache entirely using
cache: 'no-cache'fetch policies. This guarantees that pricing, promotions, and stock levels are always current during the most critical conversion steps.
The codebase also supports multi-channel routing, which lets the same deployment serve different storefronts with distinct catalogs, currencies, and shipping zones. This is crucial for businesses operating multiple markets or brands from a single codebase.
Additionally, the system incorporates webhook-driven on-demand cache revalidation. When product data changes in the backend, webhooks trigger cache invalidation so pages update faster than the 5-minute TTL would allow. This reduces stale content while avoiding unnecessary backend load.
Under the hood, the API layer is designed to be resilient, implementing automatic retries with exponential backoff to handle transient network or service disruptions gracefully.
What makes Saleor Storefront’s caching model interesting
Most e-commerce storefronts struggle with the tradeoff between fast page loads and keeping pricing accurate. Fully static sites deliver rapid performance but risk showing stale data, especially in pricing or availability. Fully dynamic sites keep data fresh but at the cost of slower page loads and potential Core Web Vitals penalties.
Saleor Storefront’s display-cached/checkout-live pattern is a pragmatic middle ground. Product and category pages, which are mostly read-only and less time-sensitive, are cached using ISR with a short 5-minute TTL. This caching strategy provides instant page loads and excellent performance metrics, which benefits SEO and user experience.
On the other hand, the cart and checkout pages are always fetched live (cache: 'no-cache'), ensuring that customers see the most current prices, discounts, and stock availability during the purchase process. This tradeoff prioritizes accuracy where it matters most.
The addition of webhook-driven cache invalidation further refines this approach. Instead of waiting for the TTL to expire, cache entries are proactively invalidated when backend data changes, improving data freshness without overloading the system with constant revalidation.
Multi-channel routing support adds complexity but is essential for real-world deployments where businesses operate multiple storefronts or markets from a single codebase. Saleor Storefront handles this gracefully, providing different catalogs, currencies, and shipping options per channel.
From a code quality perspective, the use of TypeScript strict mode and modern React and Next.js features suggests a focus on maintainability and developer experience. Tailwind CSS keeps styling consistent and utility-first.
Explore the project
The repository is organized to support this architecture clearly. While no installation or quickstart commands are provided in the analysis, the README presumably guides users through connecting the storefront to a Saleor backend.
Key areas to explore include:
- The product and category pages leveraging ISR for caching.
- The cart and checkout components that use live fetch policies.
- Multi-channel routing configuration.
- Webhook handling logic for cache invalidation.
The project’s use of Next.js 16’s App Router and React 19 means you’ll find modern React server and client components patterns. Tailwind CSS classes are scattered throughout for styling.
If you want to try it out, you’ll start by setting up a Saleor backend (either via Saleor Cloud or a local Docker instance) and then connect this storefront to that backend.
Verdict
Saleor Storefront is a solid example of a pragmatic, production-ready headless storefront that solves a real-world problem: balancing fast page loads with accurate pricing data. Its hybrid caching strategy is well thought out and backed by modern frontend technology.
It’s particularly relevant for teams building multi-channel e-commerce sites who want a maintainable, performant frontend that respects the realities of commerce data freshness.
The main limitation is that the quickstart commands and detailed setup instructions aren’t included in the provided analysis, so expect to spend some time configuring the backend connection. The tradeoff model also requires careful tuning depending on your cache invalidation needs and product update frequency.
For anyone working with headless commerce, especially using Next.js and TypeScript, Saleor Storefront is worth studying and testing as a blueprint for balancing speed and accuracy without overcomplicating the frontend.
→ GitHub Repo: saleor/storefront ⭐ 1,424 · TypeScript