Cara Marketer Indonesia Pasang Edge Functions di Vercel untuk Personalisasi Tanpa Naikkan TTFB 2026

TL;DR: Edge Functions di Vercel memungkinkan personalisasi konten (geografi, bahasa, kohort A/B test) yang dieksekusi di node server terdekat dengan pengguna. Dalam praktik di vitoatmo.com, migrasi rewrite logic dari API Routes ke Edge Functions menurunkan TTFB dari 480 ms ke 120 ms (turun 75 persen) dan menaikkan konversi halaman pricing 14 persen dalam 30 hari.
Banyak marketer berpikir personalisasi konten butuh server besar di Jakarta. Faktanya, pengguna di Medan, Makassar, dan Surabaya merasakan jarak ke server pusat: setiap 100 ms tambahan TTFB ((Time to First Byte)) menurunkan konversi 1-2 persen, sesuai studi Google web.dev. Di sinilah Edge Functions menjadi senjata baru.
Apa Masalah yang Diselesaikan Edge Functions?
Personalisasi tradisional menempatkan logic di Server-Side Rendering region tunggal. Pengguna Surabaya yang request halaman dari server Singapura biasanya 30-60 ms; ke Virginia bisa 250-300 ms. Edge Functions memindahkan logic itu ke 200+ node global, sehingga rewrite header, cookie check, atau A/B testing variant dieksekusi di node terdekat. Hasil di Core Web Vitals: LCP dan INP turun signifikan tanpa ubah aplikasi inti.
Setup di Next.js + Vercel (Step-by-Step)
| Langkah | Aksi | Catatan |
|---|---|---|
| 1 | Buat file middleware.ts di root | Otomatis berjalan di Edge runtime |
| 2 | Tambah export const config = { matcher: ['/pricing', '/blog/:path*'] } | Batasi path agar tidak boros |
| 3 | Akses geo via request.geo?.country dan request.geo?.city | Tersedia native di Vercel Edge |
| 4 | Lakukan NextResponse.rewrite(new URL('/id/pricing', request.url)) untuk redirect bahasa | Tetap di URL asli, ganti konten |
| 5 | Test di preview deployment sebelum production | Edge bug sering muncul di cold path |
Studi Kasus: Vetmo (Pet Care E-Commerce)
Saat membangun Vetmo, kami menemukan halaman product detail di-load dari pengguna di Indonesia Timur memakan 1,2-1,8 detik untuk first byte. Setelah memindahkan logic personalisasi (deteksi region untuk biaya pengiriman default) dari API Route ke Edge Function, TTFB turun ke 180-280 ms (turun 78 persen). Conversion rate halaman product detail untuk pengguna Indonesia Timur naik dari 2,1 persen ke 3,4 persen dalam 21 hari. Untuk metode validasinya, kami pakai RUM (Real User Monitoring) lewat Vercel Speed Insights, bukan synthetic Lighthouse.
Hal yang Sering Bikin Gagal
Edge runtime tidak mendukung semua API Node.js. Library seperti bcrypt, sharp, atau ORM berat akan error. Solusi: pisahkan logic berat ke API Routes biasa, dan biarkan Edge hanya menangani routing, header, cookie, dan rewrite. Detail lengkap ada di dokumentasi Vercel Edge Functions.
Pertanyaan Umum
Apakah Edge Functions menambah biaya hosting?
Tidak signifikan. Tier Vercel Pro menyertakan 1 juta invocation gratis per bulan. Untuk website 50ribu pageview/bulan, biaya tambahan biasanya nol.
Bisakah Edge Functions akses database Supabase?
Bisa, lewat HTTP API (PostgREST). Hindari koneksi pool berat karena Edge runtime stateless.
Berapa lama setup awal?
Untuk migrasi 1-2 middleware sederhana, sekitar 2-4 jam termasuk testing. Migrasi penuh aplikasi bisa 1-2 minggu tergantung kompleksitas.
Aplikasi Praktis
Marketer Indonesia yang menjalankan personalisasi geografis (mis. harga berbeda per pulau, bahasa default per daerah) sebaiknya audit dulu mana logic yang ringan dan stateless. Pindahkan ke Edge satu per satu, ukur dengan RUM, dan baru putuskan migrasi penuh setelah ada bukti angka.
Artikel Terkait
Website Bisnis
Cara Mengamankan API Website Bisnis Tanpa Jadi Ahli Keamanan
API yang bocor bisa membuka data pelanggan ke siapa saja. Lima lapisan dasar ini cukup untuk melindungi website bisnis dari kebocoran yang paling umum.
Website Bisnis
SEO Teknis: Checklist untuk Website Baru
Konten sebagus apa pun percuma kalau mesin pencari tak bisa merayapinya. Ini checklist SEO teknis yang dipakai untuk setiap website baru.
Website Bisnis
Cara Mengurangi Pogo-Sticking di Website Bisnis
Pogo-sticking menandakan pengunjung tidak menemukan yang dicari. Pelajari penyebab dan cara menguranginya agar konten lebih sering memuaskan pencari.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang