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
Continue reading
More systemJoin the Discussion
Share your thoughts and insights about this system.