Edge Computing × Frontend: Machen Sie Ihre Website blitzschnell mit Cloudflare Workers/Vercel Edge

Warum braucht das Frontend Edge Computing?

In traditionellen Architekturen müssen Benutzeranfragen die halbe Internetstrecke zurücklegen, um die Ursprungsserver zu erreichen:

Benutzer (Tokio) → CDN-Knoten (Tokio, nur statischer Cache) → Ursprung (US-Westen, dynamische Berechnung)
Latenz: ~10ms          ~150ms transpazifisch                ~50ms Berechnung
Gesamt: ~210ms

Edge Computing verlagert die Berechnungslogik auf den Knotenpunkt, der dem Benutzer am nächsten ist:

Benutzer (Tokio) → Edge-Knoten (Tokio, direkte Berechnung)
Latenz: ~10ms        ~5ms lokale Berechnung
Gesamt: ~15ms

14-fache Latenzreduzierung — das ist die Kraft von Edge Computing.

Vergleich der drei großen Edge-Plattformen

Dimension	Cloudflare Workers	Vercel Edge Functions	Deno Deploy
Laufzeitumgebung	V8 Isolate	V8 Isolate	Deno
Kaltstart	<5ms	<5ms	~20ms
Globale Knoten	300+ Städte	30+ Regionen	35+ Regionen
Kostenloses Kontingent	100K Anfragen/Tag	Projektbasierte Abrechnung	1M Anfragen/Monat
Sprachen	JS/TS/WASM	JS/TS	JS/TS/WASM
Bundle-Größenlimit	10MB	4MB	Unbegrenzt
KV-Speicher	Workers KV	Edge Config	Deno KV
Framework-Integration	Framework-agnostisch	Tiefe Next.js-Integration	Fresh

Praxisszenario 1: Geo-Routing

Leiten Sie Benutzer basierend auf ihrem geografischen Standort zu unterschiedlichen Inhalten um — mit Null-Latenz:

// Cloudflare Workers
export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
    const country = request.cf?.country as string;

    const routes: Record<string, string> = {
      CN: 'https://cn.example.com',
      JP: 'https://jp.example.com',
      US: 'https://us.example.com',
      EU: 'https://eu.example.com',
    };

    const target = routes[country] || routes['US'];

    return Response.redirect(target, 302);
  },
};

Vercel Edge-Version

// middleware.ts (Next.js)
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';

  const localeMap: Record<string, string> = {
    CN: '/zh-CN',
    TW: '/zh-TW',
    JP: '/ja',
  };

  const locale = localeMap[country] || '/en';

  if (!request.nextUrl.pathname.startsWith(locale)) {
    return NextResponse.redirect(new URL(locale, request.url));
  }

  return NextResponse.next();
}

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

Praxisszenario 2: A/B-Tests

Leiten Sie Traffic auf der Edge-Ebene — ohne clientseitiges JavaScript:

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url);

    // Read or assign experiment group
    let variant = getCookie(request, 'ab-variant');

    if (!variant) {
      variant = Math.random() < 0.5 ? 'control' : 'experiment';
    }

    // Read corresponding version HTML from KV
    const html = await env.KV.get(`landing:${variant}`);

    const response = new Response(html, {
      headers: { 'Content-Type': 'text/html' },
    });

    // Set cookie to maintain group consistency
    response.headers.append(
      'Set-Cookie',
      `ab-variant=${variant}; Path=/; Max-Age=86400`
    );

    return response;
  },
};

function getCookie(request: Request, name: string): string | null {
  const cookies = request.headers.get('Cookie') || '';
  const match = cookies.match(new RegExp(`${name}=([^;]+)`));
  return match ? match[1] : null;
}

Vergleich der Vorteile

Ansatz	FOUC	Leistungsauswirkung	SEO-freundlich	Komplexität
Clientseitiges JS-Routing	❌ Flackert	Verschlechtert LCP	❌	Niedrig
Serverseitiges Routing	✅ Kein Flackern	Erhöht Latenz	✅	Mittel
Edge-Routing	✅ Kein Flackern	Kaum Auswirkung	✅	Mittel

Praxisszenario 3: Personalisierte Inhalte

export default {
  async fetch(request: Request, env: Env) {
    const country = request.cf?.country;
    const timezone = request.cf?.timezone;

    // Display local time based on timezone
    const localTime = new Date().toLocaleTimeString('en-US', {
      timeZone: timezone,
    });

    // Display local currency based on country
    const currencyMap: Record<string, { symbol: string; rate: number }> = {
      CN: { symbol: '¥', rate: 7.2 },
      JP: { symbol: '¥', rate: 150 },
      US: { symbol: '$', rate: 1 },
    };

    const currency = currencyMap[country] || currencyMap['US'];

    // Fetch base page and inject personalized data
    const response = await fetch(request);
    const html = await response.text();

    const personalized = html
      .replace('{{LOCAL_TIME}}', localTime)
      .replace('{{CURRENCY_SYMBOL}}', currency.symbol);

    return new Response(personalized, {
      headers: response.headers,
    });
  },
};

Praxisszenario 4: API-Aggregation und Caching

Aggregieren Sie mehrere APIs auf der Edge-Ebene, um Client-Anfragen zu reduzieren:

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
    const cache = caches.default;
    const cacheKey = new Request(request.url);

    // 1. Check edge cache
    let response = await cache.match(cacheKey);
    if (response) return response;

    // 2. Parallel requests to multiple APIs
    const [user, posts, notifications] = await Promise.all([
      fetch('https://api.example.com/user', { headers: request.headers }),
      fetch('https://api.example.com/posts?limit=10'),
      fetch('https://api.example.com/notifications/unread'),
    ]);

    // 3. Aggregate responses
    const data = {
      user: await user.json(),
      posts: await posts.json(),
      notifications: await notifications.json(),
    };

    response = new Response(JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'public, max-age=60',
      },
    });

    // 4. Write to edge cache
    ctx.waitUntil(cache.put(cacheKey, response.clone()));

    return response;
  },
};

Edge-KV-Speicher: Globale Niedriglatenz-Datenbank

Cloudflare Workers KV

// Write
await env.KV.put('user:123:preferences', JSON.stringify({
  theme: 'dark',
  language: 'zh-CN',
}));

// Read (eventually consistent, ~60s global sync)
const prefs = await env.KV.get('user:123:preferences', 'json');

// List
const list = await env.KV.list({ prefix: 'user:123:' });

Vercel Edge Config

import { get } from '@vercel/edge-config';

// Read configuration (globally synced, ~1s latency)
const flags = await get('feature-flags');

if (flags?.newHomepage) {
  return newHomepage();
}
return oldHomepage();

Migration von traditionellen Architekturen

Migrationspfad

Phase 1: Statische Assets auf CDN (1-2 Tage)
  → HTML/JS/CSS/Bilder → CDN-Edge-Cache
  → Dynamische Anfragen gehen noch an den Ursprung

Phase 2: Edge-Middleware (1-2 Wochen)
  → Weiterleitungen, A/B-Tests, Geo-Routing → Edge
  → Geschäftslogik bleibt auf dem Ursprung

Phase 3: Leichte API-Edge-ifizierung (2-4 Wochen)
  → Leseintensive APIs → Edge + KV
  → Schreiboperationen gehen noch an den Ursprung

Phase 4: Schwere Logik-Edge-ifizierung (bei Bedarf)
  → SSR → Edge SSR
  → Streaming-Antworten → Edge Streaming

Überlegungen

Einschränkung	Beschreibung	Minderung
Keine Node.js-APIs	Kein `fs`, `path` usw.	Stattdessen Web-APIs verwenden
Ausführungszeitlimit	Workers: 30ms (kostenlos) / 30s (kostenpflichtig)	Lange Aufgaben aufteilen
Bundle-Größenlimit	Workers: 10MB	Tree-shaking, WASM
Kein globaler Zustand	Isoliertes Isolate pro Anfrage	Mit KV/D1 persistieren
Kaltstart nicht null	V8 Isolate ~5ms	Wichtige Routen aufwärmen

Leistungs-Benchmarks

Die ToolsKu-Website nutzt Cloudflare CDN + statische Export-Architektur:

Metrik              Traditionelles SSR    Edge Statisch
TTFB                200-500ms             10-30ms
LCP                 1.5-3s                0.3-0.8s
Globale P50-Latenz  150ms                 15ms
Globale P99-Latenz  800ms                 50ms

Zusammenfassung

Edge Computing ist die ultimative Waffe zur Frontend-Leistungsoptimierung — es geht nicht darum, 50ms auf dem Server zu sparen, sondern 150ms Netzwerklatenz auf 5ms zu reduzieren. Im Jahr 2026, wenn Ihre dynamischen Seiten noch nicht auf dem Edge laufen, verschwenden Sie über 100ms der Wartezeit Ihrer Benutzer. Vom Geo-Routing und A/B-Tests bis zur API-Aggregation gibt Edge Computing Frontend-Entwicklern die Superkraft, „Code in über 300 Städten weltweit bereitzustellen".