Vercel Middleware İstek Gövdesi Optimizasyonu: skipMiddlewareRequestBody ile TTFB ve Maliyet İyileştirmesi

Modern web mimarisinde Edge Middleware katmanı; kimlik doğrulama, coğrafi yönlendirme (geo-routing), A/B testleri, bot filtreleme ve dinamik başlık (header) enjeksiyonu gibi kritik görevleri milisaniyeler seviyesinde çözmek için endüstri standardı haline gelmiştir. Ancak Edge Function ve Middleware çalışma prensiplerinde sıklıkla gözden kaçan bir mimari darboğaz bulunmaktadır: İstemci (client) tarafından sunucuya gönderilen HTTP istek gövdelerinin (payload/body) ara katmanda ihtiyaç duyulmasa bile okunması ve aktarılması.

Vercel, routing altyapısında duyurduğu skipMiddlewareRequestBody bayrağı ile bu problemi doğrudan kökünden çözüyor. Bu rehberde; bu yeni konfigürasyonun çalışma mantığını, Time to First Byte (TTFB) ve Core Web Vitals üzerindeki etkilerini, bant genişliği maliyet optimizasyonunu ve Next.js/Vercel projelerinde nasıl uygulanacağını teknik derinliğiyle ele alıyoruz.

Edge Middleware ve HTTP Payload Darboğazı

HTTP tabanlı modern istemci-sunucu iletişiminde POST, PUT veya PATCH gibi metotlar çoğu zaman JSON yükleri, form verileri veya dosya yüklemeleri (multipart/form-data) içeren gövdeler taşır. Tipik bir Edge Middleware implementasyonunda ise geliştiriciler genellikle yalnızca şu parametreleri inceler:

• HTTP Başlıkları (Headers, Cookies, Authorization Token vb.)
• İstek URL'i, arama parametreleri (Query Params)
• İstemci IP adresi veya Geo-IP verileri

Eski Vercel mimarisinde, istemciden gelen istek bir Middleware tarafından yakalandığında, istek gövdesinin tamamı önce Middleware yürütme ortamına aktarılıyordu. Ardından bu katman tamamlandığında istek hedef Vercel Function (Serverless Handler) veya origin sunucusuna yeniden iletiliyordu.

Kritik Mimari Not: Middleware katmanınız gelen gövdeyi (req.body veya await req.json()) fiilen parse etmese dahi, verinin Edge ağı üzerinde tamponlanması (buffering) ve aktarımı gerçekleşir. Bu durum iki temel soruna yol açar: Ciddi bir TTFB gecikmesi ve gereksiz Fast Origin Transfer (FOT) tüketimi.

Büyük boyutlu dosya yüklemelerinde veya yüksek frekanslı analitik veri akışlarında (telemetry payload), Edge Middleware'in bu gövdeyi beklemesi sunucunun ilk baytı yanıtlama süresini doğrudan uzatır.

skipMiddlewareRequestBody Nedir ve Nasıl Çalışır?

skipMiddlewareRequestBody, Vercel'in yönlendirme katmanına (Routing Engine) istemciden gelen HTTP istek gövdesini ara katmana göndermemesini emreden bir yapılandırma parametresidir.

Bu ayar aktifleştirildiğinde:

1. Edge Middleware yalnızca HTTP başlıkları ve URL metaverileri ile tetiklenir.
2. İstek gövdesi Edge katmanına aktarılmadan doğrudan hedef Serverless Function'a veya Rewrite/Proxy hedefine yönlendirilir.
3. Middleware işlem süresi minimum seviyeye iner, gereksiz I/O ve ağ aktarımı ortadan kalkar.
4. Hedef API rotası (örneğin /api/upload veya Next.js Server Action), istek gövdesini eksiksiz şekilde almaya devam eder.

Mimari Değişim Tablosu

Yapılandırma ve Kod Örnekleri

Bu optimizasyonu projenizde devreye almak için projenin ana dizininde bulunan Vercel konfigürasyon dosyasını güncellemeniz ve projeyi yeniden dağıtmanız (redeploy) yeterlidir.

1. JSON Konfigürasyonu (vercel.json)

Eğer standart JSON tabanlı yapılandırma kullanıyorsanız, vercel.json dosyanızın kök dizinine parametreyi ekleyin:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "skipMiddlewareRequestBody": true
}

2. TypeScript Tabanlı Konfigürasyon (vercel.ts)

Modern projelerde tip güvenliği sağlamak için @vercel/config kütüphanesini kullanıyorsanız, vercel.ts içerisinde ayarı tanımlayabilirsiniz:

import type { VercelConfig } from '@vercel/config/v1';

export const config: VercelConfig = {
  skipMiddlewareRequestBody: true,
};

3. Middleware ve Hedef Endpoint Senaryosu

Bu ayarın geçerli olduğu bir senaryoda Next.js Middleware dosyanızın ve hedef API rotanızın nasıl çalıştığını inceleyelim:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // DİKKAT: skipMiddlewareRequestBody aktifken request.json() çağırmamalısınız.
  // Bu işlem hata verir veya boş döner.
  
  // Token kontrolü ve yönlendirme başlıklar üzerinden güvenle yapılır:
  const authHeader = request.headers.get('authorization');
  
  if (!authHeader && request.nextUrl.pathname.startsWith('/api/secure')) {
    return NextResponse.json({ error: 'Yetkisiz Erişim' }, { status: 401 });
  }

  const response = NextResponse.next();
  response.headers.set('x-custom-edge-header', 'processed-at-edge');
  return response;
}

export const config = {
  matcher: '/api/:path*',
};

Payload'ı işleyecek olan hedef Serverless API rotasında ise hiçbir değişiklik yapılması gerekmez:

// app/api/upload/route.ts
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  // İstek gövdesi doğrudan buraya aktarılır
  const body = await request.json();

  // Ağır veri işleme süreci burada gerçekleşir
  return NextResponse.json({
    success: true,
    receivedBytes: JSON.stringify(body).length
  });
}

Teknik SEO ve Core Web Vitals Açısından Önemi

Teknik SEO yalnızca GET istekleri üzerinden dönen HTML çıktısıyla sınırlı değildir. Modern web uygulamalarında kullanıcı deneyimini doğrudan belirleyen Interaction to Next Paint (INP) ve sunucu yanıt hızını ölçen Time to First Byte (TTFB) metrikleri, arama motorlarının sıralama sinyalleri arasında kritik bir yer tutar.

1. Kullanıcı Etkileşim Yanıt Süreleri (INP & TTFB İlişkisi): Kullanıcı bir form gönderdiğinde veya dinamik bir veri güncellemesi yaptığında sunucudan dönen yanıt gecikirse, arayüz bloklanabilir ve hissedilen gecikme artar. Middleware katmanının istek gövdesini beklemeden yönlendirme yapması, arka plan API çağrılarında TTFB sürelerini dramatik biçimde düşürür.
2. Altyapı Kaynaklarının Boşa Harcanmaması: Arama motoru botları (Googlebot) sitenizi tararken sunucu kapasitenizin verimli kullanılması gerekir. Sunucusuz (serverless) mimarilerde eşzamanlı isteklerin hafıza ve süre sınırlarını tüketmemesi, sitenin crawl budget (tarama bütçesi) stabilitesini korur.

Dikkat Edilmesi Gereken Riskler

skipMiddlewareRequestBody bayrağını etkinleştirmeden önce projenizdeki mevcut middleware kodunu denetlemeniz gerekir:

• Edge Katmanında JSON Doğrulama (Validation): Eğer Zod veya benzeri bir şema kütüphanesiyle Edge katmanında req.json() okuyup gövde doğrulaması yapıyorsanız, bu ayar açıldığında middleware çökecektir. Gövde doğrulama işlemlerini Route Handler seviyesine taşımalısınız.
• GraphQL Analizleri: Gelen GraphQL sorgusunun operasyon tipini middleware içerisinde body.query üzerinden okuyup rota değiştiren mimariler bu ayarla uyumsuzdur.

Kaynak: Vercel Blog - https://vercel.com/changelog/skip-sending-request-bodies-to-routing-middleware