Frontend & Jamstack
Astro (Server Islands & SSR) Integration
Deliver localized pricing in Astro static marketing sites, Server Islands, or full SSR adapters with zero client-side layout shift.
Recommended
Astro Server Island with server:defer & Fallback Slot
In Astro 4.12+, use Server Islands to stream dynamic localized pricing while rendering instant static shells with zero layout shift:
---
// src/components/PricingIsland.astro
const clientIp = Astro.clientAddress || Astro.request.headers.get('x-forwarded-for') || '';
const EDGE_API_URL = 'https://api.parityedge.app/v1/lookup';
const PROJECT_ID = 'prj_live_YOUR_KEY';
let parity = null;
try {
const res = await fetch(`${EDGE_API_URL}?projectId=${PROJECT_ID}`, {
headers: { 'x-forwarded-for': clientIp },
signal: AbortSignal.timeout(800),
});
if (res.ok) parity = await res.json();
} catch (e) {
parity = { eligible: false };
}
const basePrice = 49.00;
const finalPrice = parity?.eligible && parity.discountPercentage > 0
? (basePrice * (1 - parity.discountPercentage / 100)).toFixed(2)
: basePrice.toFixed(2);
---
<div class="p-6 rounded-2xl border border-slate-800 bg-slate-900 text-white space-y-3">
<div class="text-xs uppercase tracking-wider text-emerald-400 font-bold">Pro Annual License</div>
<div class="text-3xl font-extrabold">${finalPrice} USD</div>
{parity?.eligible && parity.discountPercentage > 0 && (
<div class="p-2.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium">
🎉 {parity.discountPercentage}% purchasing power discount active for {parity.countryName}!
</div>
)}
<a
href={`https://buy.stripe.com/sample_pro?${parity?.couponCode ? `prefilled_promo_code=${parity.couponCode}` : ''}`}
class="block text-center py-2.5 px-4 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-white font-semibold text-xs transition-all"
>
Subscribe with Local Discount
</a>
</div>Page Usage with Zero Cumulative Layout Shift (CLS)
Embed the Server Island into your landing page with server:defer to keep initial page loads instant:
---
// src/pages/pricing.astro
import PricingIsland from '../components/PricingIsland.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout title="Pricing | ParityEdge Localized Pricing">
<main class="max-w-4xl mx-auto py-16 px-4">
<h1 class="text-4xl font-extrabold text-center mb-8">Simple, Fair Global Pricing</h1>
<PricingIsland server:defer>
<div slot="fallback" class="p-6 rounded-2xl border border-slate-800 bg-slate-900/50 animate-pulse h-48 flex items-center justify-center text-slate-500 text-xs">
Calculating regional pricing...
</div>
</PricingIsland>
</main>
</Layout>Static Astro Sites (Client Runtime Script)
<!-- src/layouts/Layout.astro (Static SSG) -->
<head>
<script
src="https://api.parityedge.app/v1/parity.global.js"
data-project-id="prj_live_YOUR_KEY"
data-position="bottom-pill"
data-theme="dark"
async
></script>
</head>
<body>
<!-- Shadow DOM Banner mounts automatically -->
<parity-element></parity-element>
</body>Production Architecture Highlights
Near-Zero Cumulative Layout Shift (<0.01)
Server Islands stream localized price blocks into reserved fallback slots without layout jumps, preserving 100% Core Web Vitals scores.
Anti-VPN Edge Inspection
ParityEdge Anycast network verifies incoming request ASNs in under 10ms, preventing proxy abuse on international checkout links.