Go to homepage 2sh

Apex

Architectural exploration and reference rebuild of a high-growth B2B SaaS platform: decoupling marketing from core product engineering, cutting mobile LCP to 0.62s, and eliminating 140 KB of Next.js hydration debt.

view the live build
Apex interactive island pricing calculator and zero-CLS architecture
client
Reference Architecture
service
Next.js to Astro + Cloudflare Decoupling
sector
B2B SaaS / Developer Infrastructure
year
2026

the brief

Apex is modelled on the technical profile of a fast-growing B2B developer platform; the kind of engineering scale-up where marketing site changes routinely hijack product sprints and client-side hydration silently erodes ad conversion.

built with

Astro · Storyblok · Cloudflare Workers

what changed

Decoupling marketing from core product code reclaims 25% of engineering sprint capacity.

When a SaaS marketing site lives inside the main Next.js monorepo, every copy revision, pricing tweak, or landing page launch requires engineering pull requests, linting pipelines, and shared deployment risk. Decoupling onto Astro and Cloudflare Workers gives marketing visual self-serve publishing while product squads stop context-switching.

Replacing per-request server-side rendering with edge-cached static output and surrogate-key invalidation eliminates cold starts and runtime hydration penalties. Mobile LCP drops from 3.82 seconds to 0.62 seconds, and mobile Lighthouse hits a durable 100/100.

inside the build

the problem

In high-growth B2B scale-ups, the marketing website almost always starts as a folder inside the product monorepo. It seems convenient at seed stage, but by Series A or B, it turns into an expensive operational bottleneck.

Every routine marketing request—updating pricing tiers, adding partner logos, publishing comparison pages, or testing ad variants—turns into a Jira ticket assigned to senior full-stack engineers. Product roadmaps stall, marketing campaigns sit blocked behind two-week release cadences, and deploy rollbacks on marketing copy risk breaking production authentication.

the next.js hydration tax

Most SaaS marketing sites built on modern React frameworks ship full application runtimes for what is fundamentally editorial content.

Visiting an enterprise pricing or feature page pulls down over 140 KB of minified React runtime and component trees that must hydrate on the main thread before buttons and links respond. On throttled mobile devices used by executives traveling or reviewing links between meetings, mobile Largest Contentful Paint (LCP) degrades to 3.8 seconds, and Interaction to Next Paint (INP) triggers warnings in Google Search Console.

Apex replaces that runtime overhead with an edge-native Astro baseline. Content, navigation, and documentation compile to 0 KB of client JavaScript. Interactive elements—like a dynamic annual-monthly pricing tier calculator—are isolated into lightweight Astro islands hydrated only when scrolled into view (a 3.2 KB island payload), preserving instant interactivity without penalizing initial page weight.

15-minute publishing without developer tickets

Marketing teams should never wait for an engineering sprint to update a headline or publish customer social proof.

With Storyblok structured components mapped directly to Astro layouts, marketing operators drag verified design-system blocks into place, edit copy in a live visual preview, and publish immediately. Changes trigger automated webhook calls that purge specific edge cache tags on Cloudflare in under 15 milliseconds, without initiating a full site rebuild or requiring a Git commit.

ad clicks convert on speed, not spinners

Enterprise SaaS customer acquisition costs (CAC) continue to climb. When a targeted LinkedIn campaign or Google search ad directs high-intent prospects to a landing page that stalls for 3 seconds on mobile, up to 40% of those clicks bounce before reading the value proposition.

Apex delivers complete page renders in 0.62 seconds on throttled 4G connections. Instant load times multiply the return on paid acquisition spend, so every media dollar buys real prospect engagement instead of mobile bounce-off.

flat infrastructure overhead

Next.js serverless functions and dynamic image optimization scale computing costs aggressively under bot crawls and traffic spikes.

By distributing pre-rendered static assets across Cloudflare’s global edge network with surrogate-key cache invalidation, Apex achieves a 99.4% cache hit ratio. Origin compute is called only when webhooks actively invalidate changed content. Global response latency drops below 25ms, and hosting costs remain predictable and flat regardless of visitor volume.

the benchmark numbers

Metric Legacy Monolith (Next.js SSR) Apex (Astro + Cloudflare) Delta
Mobile LCP (throttled 4G) 3.82s 0.62s -83.8%
Initial client JavaScript 142.8 KB 0.0 KB (3.2 KB island) -97.8%
Lighthouse mobile score 48 / 100 100 / 100 +52 pts
Interaction to Next Paint (INP) 214ms 14ms -93.5%
Engineering time on marketing 20–25% sprint capacity 0 hours (marketing self-serve) Reclaims 1 eng FTE / mo
Publishing turnaround 5–7 days (dev backlog) 15 minutes (direct in CMS) Same-day GTM velocity
Edge cache hit ratio 64.2% 99.4% Origin compute eliminated

in the details

02 views
Apex zero-JS developer documentation with surrogate-key cache invalidation
Apex zero-JS developer documentation with surrogate-key cache invalidation
Apex Core Web Vitals and runtime bundle comparison audit
Apex Core Web Vitals and runtime bundle comparison audit

the result

Sub-second edge delivery protects six-figure paid acquisition budgets on LinkedIn and Google, converting mobile decision-makers before they bounce back to search results.

Decoupling the frontend into Astro and Storyblok gives marketing squads same-day publishing autonomy while restoring complete roadmap focus to core product engineering.

credits

Two Shells

Systems Engineering

building something similar?

talk to 2sh