Designing a High-Performance Static+Dynamic Web Architecture with CDN and Next.js
June 18, 2025
Building a performant, scalable web application today often means combining static assets, dynamic APIs, and real-time communication through a CDN edge. In this post, we explore four axes of modern architecture:
- CDN + Backend vs. CDN + Middleware + Backend (and an alternative client-side-rendered frontend)
- Next.js: Full Static Generation vs. Incremental Rendering
- CI/CD: PR-Driven vs. Data-Driven Pipelines
- CloudFront Configuration Highlights
1. CDN + Backend vs. CDN + Middleware + Backend
```mermaid
flowchart LR
subgraph Edge
A[Client] -->|HTTPS| B[CloudFront CDN]
end
subgraph Origin
B --> C[Middleware Layer]
C --> D[Backend API]
end
subgraph Direct
B --> E[Backend API]
end
```
| Pattern | Latency (ms) | Throughput (rps) | Complexity |
|---|---|---|---|
| CDN β Backend | ~π(πβ) | π _max | Low |
| CDN β Middleware β Backend | ~π(πβ + πβ) | π _max Γ 0.8 | Medium |
| CDN + CSR Frontend | ~π(πβ + ππ) | π _max Γ 0.9 | Low (no SSR) |
- πβ: edge-to-origin network delay
- πβ: middleware processing
- ππ: client-side render time
- π _max: CDN origin throughput
| Communication Style | Best Fit |
|---|---|
| Real-time (WebSocket) | CDN β Middleware β Backend (edge Lambda@Edge keeps WS alive) |
| Event-Driven | CDN β Backend (API Gateway + SNS/SQS) |
| Data-Driven | CDN β Middleware β Backend (GraphQL orchestration) |
Key takeaway:
- Direct CDN β Backend delivers lowest complexity and latency for pure API calls.
- Middleware allows edge logic (A/B tests, auth) but adds ~πβ ms.
- CSR frontend offloads SSR entirely but shifts work to the client (ππ).
2. Next.js: Static Generation vs. Incremental Rendering
Next.js supports three primary rendering modes:
| Mode | Build-time Cost | Per-request Cost | Freshness | Use Case |
|---|---|---|---|---|
| SSG | π(π) pages | π(1) | Stale until rebuild | Marketing, docs |
| ISR | π(1) initial build | π(1) + revalidate | TTL-based freshness | Blogs, catalogs |
| SSR | π(1) | π(1) | Always live | Authenticated dashboards |
If you statically export π = 1000 pages at build time, cost βΌ1000 Γ π‘_render. With ISR, cost reduces to oneβtime π‘_render + soft rebuilds on-demand.
sequenceDiagram participant B as Build participant U as User participant S as Server B->>FS: render all pages (π(π)) U->>CDN: request page CDN->>S: if stale (ISR) or dynamic (SSR) S->>CDN: render + cache CDN->>U: serve page
3. CI/CD: PR-Driven vs. Data-Driven Pipelines
| Trigger | Pros | Cons |
|---|---|---|
| PR-Driven | Fast feedback on code, lint, unit tests | Wastes runs on trivial changes |
| Data-Driven | Trigger on metrics (e.g. π‘_response > 200 ms) | Complex to implement |
Example:
-
PR Pipeline:
- On pull request βΆ run
lint,unit tests,build - Cost: C_pr = π_pr Γ π_job
- On pull request βΆ run
-
Data-Driven Pipeline:
- On production metric breach (error rate > 0.5%) βΆ run
smoke tests,rollback - Cost: C_dd = π_dd Γ π_job, but π_dd βͺ π_pr
- On production metric breach (error rate > 0.5%) βΆ run
Rule of thumb:
- Use PR-driven for code correctness.
- Use Data-driven for performance/regression monitoring and automated rollbacks.
4. CloudFront Configuration Highlights
| Setting | Recommendation | Why |
|---|---|---|
| Origin type | S3 REST endpoint + OAC | HTTPS + locked down |
| TTL (Min/Default/Max) | 60 s / 300 s / 86400 s | Balance freshness vs. cache hit |
| Viewer Protocol | Redirect HTTP β HTTPS | Security |
| Allowed Methods | GET, HEAD (and OPTIONS if CORS) | Minimize origin load |
| Lambda@Edge / Functions | Auth rewrites, A/B testing | Edge logic |
| Error Responses | 404 β /index.html (for SPA) | SPA fallbacks |
| Custom Headers | Cache-Control: public, max-age=300, s-maxage=86400 | Fine-tune CDN vs. browser caching |
Cache-hit ratio (CHR): If CHR = 0.90, then origin egress per 1 000 requests = 100
Egress = (1 000 Γ (1 β CHR)) β 100 requests β significant cost savings at scale.
References
- AWS CloudFront Developer Guide β Edge Caching Strategies
- Next.js Docs β Incremental Static Regeneration
- AWS Certificate Manager β DNS Validation
- GitHub Actions Docs β Workflow Triggers
Join the Discussion
Share your thoughts and insights about this system.