Belajar Frontend - Edge Computing & Rendering

#Pendahuluan

Di episode 2 kita belajar perjalanan request: setiap jarak geografis menambah latensi. Episode 20 membahas solusinya: edge computing — menjalankan kode dan melayani konten dari jaringan server yang tersebar sedekat mungkin dengan pengguna, plus strategi rendering yang menentukan di mana dan kapan halaman dibangun.

Mengapa ini penting? Karena performa (episode 12) punya komponen geografis: pengguna di Indonesia tidak peduli server kalian ada di San Francisco. Memahami rendering strategy juga menyatukan banyak keputusan yang sudah kalian pelajari — RSC (episode 9), data fetching (episode 11), dan performa (episode 12).

#CDN dan Edge

CDN (Content Delivery Network) adalah jaringan server cache yang mendistribusikan konten statis ke lokasi pengguna.

Edge functions melangkah lebih jauh: bukan hanya cache file statis, tetapi menjalankan kode (auth, rewriting, personalisasi) di lokasi edge. Contoh nyata: middleware Next.js di episode 19 berjalan di edge untuk memproteksi halaman tanpa menyentuh server utama.

#Strategi Rendering

Empat strategi utama — perbedaan intinya adalah kapan halaman dirender:

#CSR (Client-Side Rendering)

"use client";
export function Dashboard() {
  const { data } = useQuery({ queryKey: ["stats"], queryFn: fetchStats });
  return <StatsGrid data={data} />;
}

HTML awal kosong, JavaScript membangun segalanya. Fleksibel, tetapi LCP bergantung pada bundle JS (biasanya buruk — episode 12).

#SSG (Static Site Generation)

export default function AboutPage() {
  return <h1>Tentang TokoKita</h1>;
}

HTML dihasilkan sekali saat build, disajikan dari CDN. Tercepat — tidak ada runtime sama sekali. Sempurna untuk halaman yang jarang berubah.

#SSR (Server-Side Rendering)

export default async function ProductPage({ params }) {
  const product = await getProduct(params.slug); // per request
  return <ProductView product={product} />;
}

HTML dihasilkan server setiap request. Data selalu segar, tetapi ada biaya server per kunjungan.

#ISR (Incremental Static Regeneration)

import { db } from "@/lib/db";
 
export const revalidate = 3600; // bangun ulang max 1x/jam
 
export default async function Catalog() {
  const products = await db.product.findMany();
  return <ProductGrid products={products} />;
}

Gabungan terbaik untuk banyak kasus: halaman disajikan statis dari CDN (cepat), tetapi di-revalidate otomatis setiap interval (data tidak basi). Cocok untuk katalog TokoKita: produk berubah jarang, pengunjung banyak.

#Edge Functions dan Deployment

Edge functions paling cocok untuk operasi ringan yang dekat pengguna: auth check, geo-redirect, A/B test, API proxy kecil. Berat? Jalankan di server biasa.

Platform deployment di 2026: Vercel (Next.js), Cloudflare Pages/Workers, Netlify. Semua menyediakan CDN + edge + HTTPS otomatis:

bunx vercel --prod

Untuk self-host: next start di VPS, atau Docker standalone (lihat Dockerfile repo ini). Keduanya sah — pilih sesuai kontrol vs kemudahan.

#Praktik: Rendering Strategy TokoKita

Peta strategi yang masuk akal untuk TokoKita:

Public + statis  → SSG/ISR (CDN, tercepat)
Private + interaktif → CSR
Data segar per-user → SSR
Semua bisa campur dalam satu aplikasi

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• CDN mendekatkan konten; edge functions menjalankan kode ringan di dekat pengguna.
• CSR/SSG/SSR/ISR menentukan kapan halaman dirender — pilih per halaman, bukan per aplikasi.
• "Kalau bisa statis, statiskan": SSG/ISR + CDN adalah kombinasi tercepat.
• Platform edge (Vercel, Cloudflare, Netlify) menyediakan CDN + deploy otomatis.

Di episode 21 selanjutnya kita membuka cakrawala performa ekstrem: WebAssembly & WebGPU — menjalankan kode native dan komputasi GPU di browser untuk kasus penggunaan berat. Sampai jumpa di episode 21!