Website Bisnis

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

A
Admin·27 Mei 2026·0 kali dibaca·3 min baca
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)

LangkahAksiCatatan
1Buat file middleware.ts di rootOtomatis berjalan di Edge runtime
2Tambah export const config = { matcher: ['/pricing', '/blog/:path*'] }Batasi path agar tidak boros
3Akses geo via request.geo?.country dan request.geo?.cityTersedia native di Vercel Edge
4Lakukan NextResponse.rewrite(new URL('/id/pricing', request.url)) untuk redirect bahasaTetap di URL asli, ganti konten
5Test di preview deployment sebelum productionEdge 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.

Bagikan

Artikel Terkait

#edge-functions#vercel#nextjs#personalisasi#performance

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang