Reference Architecture: Ecommerce Frontend
Product forces
Ecommerce frontends balance discoverability, conversion, catalog freshness, personalization, checkout correctness, experimentation, and third-party risk.
Architecture sketch
Default decisions
| Area | Default |
|---|---|
| rendering | static/cached product discovery; stricter dynamic rendering for checkout |
| caching | catalog pages cached with explicit revalidation and inventory freshness rules |
| state | cart is authoritative server/session state with optimistic local feedback |
| performance | image pipeline, route prefetch, third-party script budget, critical CSS |
| security | payment isolation, CSP, strict storage policy, anti-clickjacking |
| privacy | consent-aware analytics and tag governance |
| reliability | fallback merchandising, cart recovery, checkout rollback/kill switch |
Critical risks
- Marketing tags delaying LCP or breaking checkout.
- Stale inventory or price displayed without reconciliation.
- Cart state split between client, session, and backend.
- Experimentation changes without accessibility or performance gates.
- Payment scripts granted broader access than necessary.
Review checklist
- Are discovery routes cacheable without leaking personalized data?
- Is price/inventory reconciled before checkout commitment?
- Are third-party scripts classified by purpose, data access, and owner?
- Does checkout have a rollback and degraded payment path?
- Are images and fonts budgeted for low-end mobile?
Exercises
- Create a cache policy table for homepage, listing, product detail, cart, and checkout.
- Write a third-party script register for analytics, ads, payment, and experimentation.
- Define a performance budget for product detail on mobile.
Source lens
Pair this with performance, browser security, privacy measurement, and third-party script incident material.