PWA Studio vs Custom Headless Magento: A Developer View
When a Magento store owner asks about headless, the conversation usually mixes three different things: Adobe's PWA Studio, a custom headless frontend in a framework like Next.js or Nuxt, and the general idea of a faster storefront. They have very different costs. This article compares PWA Studio with a custom headless build from the point of view of the team that has to build and maintain it, and puts both next to the option many stores should consider first, a fast server rendered theme.
What headless means for Magento
In a headless setup Magento stops rendering HTML for the storefront. A separate frontend application renders pages and talks to Magento through APIs, mainly GraphQL. Magento keeps doing what it is good at: catalog, pricing, promotions, cart, checkout logic, orders, customers, and the admin.
The frontend becomes a second application with its own repository, build, hosting, monitoring and release cycle. That is the main cost, and it is permanent. Anything that is a theme change on a classic Magento store becomes a change in a separate codebase, often owned by a different team.
PWA Studio in short
PWA Studio is Adobe's set of tools for building a React storefront on Magento GraphQL. Its main parts are:
- Venia, a reference storefront you scaffold and then customize.
- Peregrine, a library of React hooks and talons that hold the storefront logic (cart, checkout, product, category).
- Buildpack, the webpack based build tooling, and an extension system for targets and intercepts.
- UPWARD, a specification and server for serving the app shell and proxying requests, with a PHP implementation that can run inside Magento.
The appeal is a working storefront from day one, built by the same company that builds Magento, with checkout, account, search and Page Builder content rendering already wired to GraphQL.
The practical concerns
- Customization model. Changing Venia deeply means learning the targets and intercepts system or forking components. Upgrades of a heavily forked Venia are hard.
- Ecosystem. Most Magento extensions have no PWA Studio frontend. Anything with storefront UI needs to be rebuilt in React, and the backend part needs GraphQL coverage, which many extensions do not provide.
- Direction. Adobe's own storefront focus for Adobe Commerce has moved toward a storefront built on Edge Delivery Services with drop-in components. PWA Studio still exists, but before starting a new project on it, check its repository for recent releases and open issues and decide whether you are comfortable with its pace.
A custom headless frontend
The other route is to build the frontend in a general purpose framework such as Next.js, Nuxt or Remix, or on a commercial headless frontend platform, talking to Magento GraphQL. The headless Next.js storefront guide covers what that looks like in code.
What you gain compared with PWA Studio:
- A mainstream framework with a large hiring pool and documentation that is not Magento specific.
- Full control over rendering strategy: static generation, server rendering, incremental revalidation, edge rendering.
- Freedom to combine Magento with a headless CMS, a search service or other APIs in one frontend.
What you pay:
- You build everything. Category pages with layered navigation, product pages for every product type you sell, cart, checkout, customer account, wishlist, order history, password reset, newsletter, store switching, error pages. Each one is a set of GraphQL queries and UI states.
- Checkout and payments are the biggest single item. Each payment provider needs its frontend SDK integrated with your checkout and with Magento's payment method on the backend.
- Every Magento extension with storefront features needs GraphQL support and a new UI.
The parts that are hard in any headless build
GraphQL coverage
Core GraphQL covers a lot, but not everything. Custom product attributes, custom checkout fields, B2B features and third party extensions often need custom resolvers. Plan for writing them. The pattern is in custom GraphQL query resolvers.
Caching
On a classic store Varnish caches whole pages and customer data loads separately. In headless the frontend has its own caching layer and GraphQL queries can be cached at the Magento side too. Getting both right, and invalidating both when a product changes, needs real design. See GraphQL caching and performance.
SEO and URLs
The frontend must resolve Magento URL rewrites, render server side for crawlers, output canonical tags, hreflang, structured data and correct status codes for missing pages and redirects. Classic themes get most of this from Magento and from SEO extensions. In headless you rebuild it.
Content
Marketing teams who use Page Builder or CMS blocks need that content to render in the new frontend. Either you render Page Builder HTML (and its styles) in the frontend, or you move content management to a headless CMS. Both are work.
Preview and admin features
Features that depend on Magento rendering the page, such as some preview and staging behaviors, behave differently or need extra work when Magento no longer renders the storefront.
Comparison
| Topic | PWA Studio | Custom headless | Server rendered theme (e.g. Hyvä) |
|---|---|---|---|
| Starting point | Venia reference store | Empty app or a starter | Complete theme |
| Stack | React, Apollo, PWA Studio libraries | Your choice | PHP templates, Alpine.js, Tailwind |
| Extensions with UI | Rebuild in React plus GraphQL | Rebuild in your framework plus GraphQL | Compat modules or fallback |
| Hosting | Magento plus frontend (or UPWARD PHP) | Magento plus frontend hosting | Magento only |
| Team skills | React plus PWA Studio specifics | Framework plus GraphQL | Magento frontend |
| Typical effort | High | Highest | Medium |
When headless makes sense
Headless is worth its cost when there is a reason beyond page speed. Some good reasons:
- The store is one of several channels served from a shared frontend, for example a content heavy brand site with commerce embedded.
- There is already a strong frontend team working in a JavaScript framework, and Magento skills are thin.
- The experience needs things a server rendered theme cannot reasonably do, such as an app like product builder that is the core of the business.
- Commerce is moving from Magento to another backend over time, and the frontend should outlive the backend.
If the goal is mainly better Core Web Vitals and a modern frontend developer experience, a server rendered theme like Hyvä usually gets most of the benefit for a fraction of the cost and keeps the extension ecosystem working. The comparison with Luma is in Hyvä vs Luma for developers.
Questions to answer before deciding
- Who will own the frontend in two years, and do they know the chosen stack?
- Which extensions have storefront features, and do they expose GraphQL?
- Which payment methods are required, and do they have frontend SDKs that fit the chosen stack?
- How do marketers create content today, and how will they do it after?
- What is the budget for running two applications in production, including monitoring and on call?
Honest answers to these questions usually make the decision obvious. If they do not, prototype the hardest page (often the product page for your most complex product type) in the candidate stack before committing.
FAQ
Is PWA Studio still maintained?
It still exists, but Adobe's storefront focus for Adobe Commerce has moved toward the Edge Delivery Services based storefront. Check the PWA Studio repository's recent releases before starting a new project on it.
Does a headless Magento store need GraphQL?
In practice yes. Core GraphQL covers catalog, cart, checkout and customer flows. REST can fill gaps, but most headless frontends use GraphQL and add custom resolvers for missing data.
Is headless faster than a Magento theme?
It can be, but a well built server rendered theme such as Hyvä reaches good Core Web Vitals too. Speed alone rarely justifies running a second application.
What is the biggest hidden cost of headless?
Rebuilding everything Magento extensions and the default theme already provide, especially checkout, payment integrations, SEO details and content rendering.
I am available for freelance Magento and Adobe Commerce work, including headless architecture reviews. If you need help with this, get in touch.
Related articles
Magento 2 GraphQL Caching and Performance: Practical Guide
Make Magento 2 GraphQL fast: GET queries, Varnish caching, X-Magento-Cache-Id, @cache identities for custom resolvers, N+1 batching and query complexity limits.
Magento 2 GraphQL Checkout: Cart to Order Mutations
Full Magento 2 GraphQL checkout flow: guest and customer carts, addProductsToCart, addresses, shipping, payment, placeOrder, merging carts and common errors.
Magento 2 GraphQL Customer Login, Tokens and Security
Customer authentication with Magento 2 GraphQL: login tokens, lifetime, logout, registration, password reset, safe token storage, expiry handling and reCAPTCHA.
Headless Magento 2 with Next.js: Storefront Architecture
Build a headless Magento 2 storefront with Next.js: GraphQL client, route query for URLs, product pages, cart server actions, tag revalidation and SEO basics.