This page is not about one tool. It’s about how the layers fit together: framework, CMS, hosting, and AI tooling. If the headless CMS page explains the content layer and the framework page explains the frontend layer, this page explains how the full system comes together.
How does a modern website stack fit together?
A modern website is rarely one tool. It’s a stack of choices: a framework that renders the site, a CMS that manages content, hosting that delivers it globally, and optional AI tooling layered on top. What makes the modern stack compelling is not simply that parts of it are open source — it’s that the stack is more portable, more flexible, and less dependent on a single vendor’s roadmap.
The stack mindset changes the question from “which platform should we buy?” to “what is the right tool for each job?”
For teams that care about long-term control, that matters more than whether the software license itself is free.
The stack mindset changes the question from “which platform should we buy?” to “what is the right tool for each job?” That usually leads to better fit and fewer lock-in problems later.
| Layer | Role | Examples |
|---|---|---|
| Framework | Renders the site | Next.js, Astro, Remix, SvelteKit |
| CMS | Manages content | Sanity, Payload, Contentful, Strapi |
| Hosting | Delivers globally | Vercel, Cloudflare, Netlify |
| AI Layer | Builds & optimizes | Claude, GPT, self-hosted models |
Which framework fits the stack best?
Each framework has strengths and trade-offs. The right choice depends on your business priorities — how much dynamic functionality you need, how critical page speed is to conversions, and how large a talent pool you want to hire from. The four leading options span from the broadest hiring market (Next.js) to the fastest page performance (Astro) to deep commerce integration (Remix) to the leanest page delivery (SvelteKit).
Next.js (by Vercel) — Our default recommendation
The most widely adopted modern framework, backed by the largest developer talent pool in the industry.
- Best for: Companies that need a content-rich marketing site with dynamic features — personalization, A/B testing, authenticated sections, e-commerce.
- Strengths: Largest hiring pool of any modern framework, which means lower recruiting costs and faster team-building. The ecosystem of ready-made integrations reduces build time and implementation spend.
- Limitations: Can deliver more infrastructure than a simple brochure site needs, adding complexity without proportional return.
Our default recommendation for most mid-market marketing sites. The talent availability, ecosystem depth, and long-term flexibility are unmatched.
Astro — Best for pure content sites
Built for content-heavy sites, delivering the fastest possible page loads — which directly impacts conversion rates and search rankings.
- Best for: Content-driven marketing sites, blogs, documentation — anywhere page speed is a revenue driver.
- Strengths: Fastest possible page loads (every 100ms of load time costs conversions), excellent organic search performance, and the lowest hosting costs of any modern framework. Works with standard component libraries, so your investment in existing code carries forward.
- Limitations: Smaller talent pool than Next.js. Less suited for highly interactive applications.
Our recommendation for pure content/marketing sites where speed-to-conversion and low operating cost are priorities.
Remix (by Shopify) — Best for e-commerce
Framework backed by Shopify, purpose-built for commerce and transactional workflows.
- Best for: E-commerce sites (Shopify ecosystem), applications with complex checkout and form flows, teams where every transaction matters.
- Strengths: The checkout works on any connection speed — critical for mobile commerce where dropped connections mean dropped revenue. Deep Shopify integration means lower implementation cost if Shopify is already in your commerce stack.
- Limitations: Smaller community than Next.js, which means a narrower hiring pool and fewer ready-made integrations.
The right choice when Shopify is part of the stack or when checkout reliability on every device is a hard revenue requirement.
SvelteKit — Smallest bundle size
A compiler-based framework that delivers the leanest pages of the group — measurably faster load times with less engineering overhead to maintain.
- Best for: Teams that prioritize the fastest possible visitor experience and high developer productivity.
- Strengths: Delivers the smallest pages, which means faster loads, lower bounce rates, and better conversion performance. Developers ship faster with less boilerplate, reducing implementation cost per feature.
- Limitations: The smallest talent pool and fewest off-the-shelf integrations of the four, which increases recruiting effort and may increase custom build cost.
Excellent framework with the best developer productivity. The talent pool trade-off is real, but narrowing fast.
Deep dive on the frontend layer: frameworks →
Which CMS fits the stack best?
The CMS manages your content and delivers it via API. The right choice depends on your priorities: Sanity offers the best content modeling, Payload gives you full code ownership, Contentful serves enterprise governance needs, Strapi provides quick setup, and Storyblok has the best visual editor for marketing teams.
Sanity — Most recommended
Real-time, structured content platform with a fully customizable editing studio.
- Best for: Teams that need deep content modeling, real-time collaboration, and a highly customized editorial experience.
- Pricing: Free tier (generous), then usage-based. No per-seat charges on most plans.
Our most frequently recommended CMS. The content modeling is best-in-class, and the editing experience rivals any traditional CMS.
Payload CMS — Full ownership
Fully open-source CMS you own outright — the code, the data, the hosting decision.
- Best for: Teams that want complete ownership of their content infrastructure. The CMS itself becomes a capital asset on your balance sheet, not a recurring expense on your P&L.
- Pricing: Free and open source (MIT license). You pay only for hosting — typically a fraction of what a comparable SaaS CMS charges annually.
The strongest play for teams who take the ownership thesis seriously. Pairs exceptionally with Next.js. You own the CMS itself.
Contentful — Enterprise incumbent
Enterprise-grade headless CMS. The longest-tenured major player.
- Best for: Large organizations with complex content operations, multi-brand/multi-market content, and enterprise compliance needs.
- Pricing: Per-space pricing with usage limits. Can get expensive at scale.
The enterprise choice. Excellent for complex governance needs. Can be overkill (and overpriced) for mid-market.
Strapi — Quick setup
Open source headless CMS popular for its admin panel and quick setup.
- Best for: Teams that want a self-hosted CMS with a polished admin UI and plugin ecosystem without going fully custom.
- Pricing: Open source (community edition free). Cloud and enterprise editions available.
Good entry point for teams new to headless. At scale, Payload and Sanity offer more flexibility.
Storyblok — Best visual editor
Headless CMS with a built-in visual editor that marketers love.
- Best for: Marketing teams that need a “what you see is what you get” editing experience without sacrificing headless architecture.
- Pricing: Per-space with user limits.
The best editing UX for non-technical teams. If your marketing team’s comfort is the top priority, Storyblok bridges the gap.
Deep dive on the content layer: headless CMS →
How do the pieces fit together in practice?
Three common configurations cover the most typical use cases. The right combination depends on scope, integrations, governance needs, and how much of the workflow is already structured for AI-assisted delivery. Each stack below pairs a framework, CMS, hosting platform, and AI layer into a coherent system.
The Performance Stack — Content-first marketing site
| Layer | Tool | Why |
|---|---|---|
| Framework | Astro | Fastest page loads — directly tied to lower bounce rates and higher conversions. |
| CMS | Sanity | Best content modeling. Your editors publish faster with less friction. Free tier. |
| Hosting | Cloudflare Pages | Global delivery with the lowest infrastructure cost at scale. |
| AI | Claude API + agents | Continuous content, SEO, and conversion optimization. |
Result: The lowest operating cost with the fastest visitor experience — every millisecond of load time translates to measurable conversion lift. Best when speed-to-conversion and editorial velocity matter more than application complexity.
The Full-Featured Stack — Dynamic sites & apps
| Layer | Tool | Why |
|---|---|---|
| Framework | Next.js | Largest talent pool. Handles content and dynamic applications in one codebase. |
| CMS | Sanity | Live preview means editors see changes instantly — faster publish cycles. |
| Hosting | Vercel | Built by the Next.js team. Built-in performance analytics for ongoing optimization. |
| AI | OpenAI + Claude APIs | Personalization, search intelligence, and content generation. |
Result: The most versatile configuration — one team, one codebase, covering marketing content, interactive tools, portals, and integrations. Best when the site needs to do more than publish pages.
The Full-Ownership Stack — Maximum data sovereignty
| Layer | Tool | Why |
|---|---|---|
| Framework | Next.js | Largest talent pool. Most flexible modern framework. |
| CMS | Payload CMS | Fully open source (MIT). A capital asset, not a recurring license. |
| Hosting | Self-hosted | Your servers, your data, your compliance posture. |
| AI | Self-hosted models | Full control over AI data processing — no third-party data exposure. |
Result: Maximum ownership of code, content, infrastructure, and data handling. Every dollar spent builds equity in an appreciating asset rather than a depreciating subscription. Best for regulated industries, companies with strict data governance, or leadership teams that view infrastructure as a long-term investment.
How does the cost model change with a modern stack?
The biggest difference is not one universal dollar amount — it’s where the spend goes. Legacy SaaS platforms concentrate cost into recurring software contracts. Modern stacks shift more of that spend toward implementation, hosting, and support you can choose based on your needs.
The long-term advantage is not that a modern stack is always cheaper. It’s that the cost structure is more flexible, the dependencies are less concentrated, and the exit options are dramatically better.
| Dimension | Legacy SaaS CMS | WordPress (managed) | Modern Stack |
|---|---|---|---|
| Software licensing | Usually concentrated in a recurring platform contract | Lower software cost, with paid plugins or managed plans layered on | Often lower licensing cost, with more spend shifted to implementation and hosting |
| Hosting / infrastructure | Bundled into the platform experience | Varies by host, traffic, and plugin footprint | Usually usage-based and chosen independently from the CMS |
| Implementation complexity | Lower complexity up front, within the platform boundaries | Moderate complexity that grows with plugins and customizations | More architecture choices up front, but greater long-term flexibility |
| Editorial experience | Generally polished and tightly integrated | Familiar and flexible, but inconsistent across setups | Depends on CMS choice, with strong options for both structured and visual editing |
| Vendor dependency | High, because content, templates, and pricing live in one platform | Moderate, depending on host and plugin ecosystem | Lower when content, frontend, and hosting are intentionally decoupled |
| Security / maintenance | More vendor-managed, less operational control | More owner-managed across updates, plugins, and security | More engineering ownership, but fewer legacy platform constraints |
| Ability to replace one layer | Lower, because the stack is more tightly coupled | Possible, but often messy depending on implementation choices | Highest when the architecture is designed for independent layers |
For many teams, the long-term advantage of a modern stack is not that it is always cheaper in every scenario. It’s that the cost structure is more flexible, the dependencies are less concentrated, and the exit options are much better if the business changes.
Which stack is right for your use case?
You don’t need to evaluate every tool independently. Start with your primary use case, and the right combination becomes clear. The four most common scenarios — content-first sites, dynamic marketing sites, e-commerce, and maximum data sovereignty — each point to a specific stack configuration.
Content-first marketing site
Recommended: Astro + Sanity + Cloudflare
Maximum performance, lowest operating cost, best editorial experience. Your marketing team publishes faster, your visitors convert at higher rates, and your infrastructure costs stay flat as traffic grows.
Marketing site + dynamic features
Recommended: Next.js + Sanity + Vercel
The most popular modern stack. Blog, resource center, customer portal, interactive tools — all in one codebase. The largest available talent pool and the deepest ecosystem of ready-made integrations, which keeps both build cost and long-term staffing cost lower.
E-commerce + content
Recommended: Remix + Sanity + Vercel (or Shopify Hydrogen)
Deep Shopify integration. The checkout works on any connection speed — critical for mobile commerce where a dropped connection means a dropped sale. Content and commerce in one experience.
Maximum ownership / data sovereignty
Recommended: Next.js + Payload CMS + Self-hosted
You own every layer. CMS code, content data, server infrastructure. No vendor can reprice your renewal, access your customer data, or deprecate a feature your business depends on. Best for regulated industries, companies with strict data residency requirements, or leadership teams that treat infrastructure as a long-term capital investment.