App-like navigation (SPA)
Client-side routing makes page-to-page feel instant — no white flash, no full reload. Links prefetch, so the next page is often ready before the tap.
// Compare approaches
Headless vs Shopify Liquid theme: which should you build?
Both ship great stores. The right call comes down to your speed ceiling, content complexity, budget, and how far you need to customize beyond what a theme allows.
| Headless (Hydrogen / Next.js) | Liquid theme | |
|---|---|---|
| Performance ceiling | Highest — edge-rendered, sub-second | Good with tuning, theme-bound |
| Design & content flexibility | Unlimited (your own front-end) | Constrained to theme + sections |
| Build cost | $9k–$20k+ | $1k–$20k by scope |
| Time to launch | Longer (custom build) | Faster |
| Maintenance | You own a front-end app | Shopify-managed theme |
| Checkout | Shopify checkout (same) | Shopify checkout (same) |
| Best for | Content-rich, brand-led, perf-critical | Most stores; faster, leaner budgets |
// Why teams move off themes
Server components & streaming
Render at the edge and stream HTML in. React Server Components keep data-fetching and heavy logic on the server, so the browser downloads far less JavaScript.
Ship only interactive JS
Islands and partial hydration keep static content static — you’re not shipping a megabyte of theme scripts just to render a paragraph.
Design & interaction freedom
Build complex filtering, animations, view transitions, or product configurators without fighting Liquid’s page-per-request model or a theme’s section limits.
Composable, best-of-breed
Plug in the best CMS, search, reviews, and personalization (Sanity, Algolia, and friends) instead of being boxed into theme-compatible apps.
One typed component system
Tested, reusable React components shared across web, app, and landing pages — faster iteration and fewer bugs than copy-pasted Liquid snippets.
// Performance, apples-to-apples
Assume both are expertly built. On the very first paint they land close — Shopify’s CDN with a lean theme is quick, and so is a well-built headless front-end. The architectural gap opens the moment a shopper starts moving through the store.
Perceived in-session navigation — lower is better
A property of the architecture, not the content: a theme reloads the full document on every navigation; a headless SPA swaps content client-side and prefetches the next route. The gap holds when both are expertly built.
~7× Faster page-to-page navigation in-session
−40%+ Less client JS — server components keep logic off the browser
<100 ms Interaction response (INP) without server round-trips
// Our take
Go headless when speed and brand experience are competitive advantages and the budget supports it. Stay on a well-built Liquid theme when you want the fastest, leanest path to a great store.
// Let's talk
Not sure which way to go?
Tell us about your store and goals — we'll give you a straight recommendation, no upsell, and a rough estimate either way.
hello@codelab.technology