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 Marketer Indonesia Pasang CSS Anchor Positioning di Next.js untuk Tooltip dan Dropdown Tanpa JavaScript di 2026
CSS Anchor Positioning gantikan library Floating UI di tooltip dan dropdown. Pangkas bundle 8-15 KB dan naikkan INP halaman fitur di Next.js 2026.
Website Bisnis
Cara Marketer Indonesia Pasang content-visibility di Next.js untuk Pangkas LCP Halaman Panjang dari 3,8 ke 1,9 Detik di 2026
Halaman panjang sering kena penalti Core Web Vitals karena browser merender semua elemen sekaligus. Properti CSS content-visibility memangkas waktu render hingga setengahnya tanpa ubah markup.
Website Bisnis
Cara Marketer Indonesia Pasang Passkeys di Next.js untuk Login Tanpa Password dan Naikkan Repeat Login 4x di 2026
Panduan implementasi passkeys di Next.js App Router pakai library SimpleWebAuthn. Turunkan friksi login, naikkan repeat purchase, hapus tiket "lupa password".
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang