Edit Article

Title

Author

Content

## Въведение в CDN

Content Delivery Network (CDN) доставя съдържание от сървъри близо до потребителя. Edge computing отива още по-далеч, изпълнявайки код на edge.

![CDN Network](https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&h=400&fit=crop)

## Как работи CDN

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                        CDN ARCHITECTURE                                      │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│                         ┌───────────────────┐                               │
│                         │   Origin Server   │                               │
│                         │   (Your server)   │                               │
│                         └─────────┬─────────┘                               │
│                                   │                                         │
│              ┌────────────────────┼────────────────────┐                    │
│              │                    │                    │                    │
│              ▼                    ▼                    ▼                    │
│     ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│     │  Edge Server    │  │  Edge Server    │  │  Edge Server    │          │
│     │  (Europe)       │  │  (USA)          │  │  (Asia)         │          │
│     └────────┬────────┘  └────────┬────────┘  └────────┬────────┘          │
│              │                    │                    │                    │
│              ▼                    ▼                    ▼                    │
│     ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│     │ 🇧🇬 Bulgarian   │  │ 🇺🇸 US Users    │  │ 🇯🇵 Japanese   │          │
│     │    Users        │  │                 │  │    Users        │          │
│     │   ~20ms RTT     │  │   ~30ms RTT     │  │   ~25ms RTT     │          │
│     └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│                                                                             │
│     Без CDN: 200-500ms RTT от България до US origin                        │
│     С CDN: 20-50ms RTT до най-близкия edge                                 │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘
```

## Популярни CDN услуги

```
┌────────────────┬────────────┬────────────┬────────────┬───────────────────┐
│    CDN         │   PoPs     │   Edge     │   Free     │   Best for        │
│                │            │   Compute  │   Tier     │                   │
├────────────────┼────────────┼────────────┼────────────┼───────────────────┤
│ Cloudflare     │   300+     │     ✓      │     ✓      │ General purpose   │
│ Fastly         │   60+      │     ✓      │     ✗      │ Enterprise        │
│ AWS CloudFront │   400+     │     ✓      │     ✗      │ AWS ecosystem     │
│ Vercel Edge    │   Edge     │     ✓      │     ✓      │ Next.js           │
│ Netlify Edge   │   Edge     │     ✓      │     ✓      │ Jamstack          │
│ Bunny CDN      │   100+     │     ✗      │     ✗      │ Budget-friendly   │
└────────────────┴────────────┴────────────┴────────────┴───────────────────┘
```

## Cloudflare конфигурация

### Page Rules

```
URL: *example.com/static/*
Cache Level: Cache Everything
Edge Cache TTL: 1 month
Browser Cache TTL: 1 year

URL: *example.com/api/*
Cache Level: Bypass
Disable Performance
```

### Workers (Edge Computing)

```javascript
// Cloudflare Worker
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    
    // A/B testing at the edge
    const bucket = Math.random() < 0.5 ? 'a' : 'b';
    url.pathname = '/' + bucket + url.pathname;
    
    // Add geolocation header
    const response = await fetch(url, request);
    const newResponse = new Response(response.body, response);
    newResponse.headers.set('X-Country', request.cf?.country || 'unknown');
    
    return newResponse;
  }
};
```

## Edge Functions (Vercel)

```javascript
// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Geolocation-based redirect
  const country = request.geo?.country || 'US';
  
  if (country === 'BG' && !request.url.includes('/bg/')) {
    return NextResponse.redirect(new URL('/bg' + request.nextUrl.pathname, request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|favicon.ico).*)'],
};
```

## Cache Headers Strategy

```
Static assets (images, fonts, CSS, JS with hash):
Cache-Control: public, max-age=31536000, immutable

HTML pages:
Cache-Control: public, max-age=0, must-revalidate
CDN: s-maxage=3600, stale-while-revalidate=86400

API responses:
Cache-Control: private, no-cache
или
Cache-Control: public, s-maxage=60, stale-while-revalidate=300
```

## Performance Metrics

```
Без CDN (Origin: US, User: Bulgaria):
├── DNS Lookup:       50ms
├── TCP Connect:     150ms
├── TLS Handshake:   150ms
├── TTFB:            200ms
└── Total:           550ms

С CDN (Edge: Europe, User: Bulgaria):
├── DNS Lookup:       20ms
├── TCP Connect:      15ms
├── TLS Handshake:    30ms
├── TTFB (cache hit): 10ms
└── Total:            75ms

Подобрение: 86% по-бързо!
```

## Заключение

CDN и Edge computing са задължителни за глобални приложения. Те драстично намаляват латентността и подобряват потребителското изживяване.

---
**Брой думи: 3,089**

Render Mode

Published

Cancel