Membangun Arsitektur Frontend Next.js SSR dengan Edge Caching Cloudflare

Dalam 15 menit ke depan, kita akan merakit sebuah stack arsitektur frontend skala enterprise dari nol sampai benar-benar berjalan mulus. Pengalaman di lapangan membuktikan bahwa SSR murni tanpa strategi edge caching yang tepat adalah resep bencana saat trafik lonjakan tiba—CPU server Node.js Anda akan kolaps melayani render halaman statis yang seharusnya bisa disajikan langsung dari edge CDN. Mari kita bedah bagaimana meraciknya agar latensi turun drastis.

1. Menu Kita Hari Ini & Alat yang Perlu Disiapkan

Pagi ini di ruang server virtual kita, meja dapur sudah dipenuhi bahan-bahan siap saji: sebuah aplikasi Next.js (App Router), akun Cloudflare dengan Cloudflare Workers aktif, sedikit sentuhan Redis untuk state management jika diperlukan, dan tentu saja terminal kesayangan Anda. Kita tidak akan berbicara tentang teori muluk-muluk; kita akan langsung menyambungkan pipa SSR Next.js agar di-cache secara cerdas di jaringan edge global Cloudflare.

[!IMPORTANT] Pastikan Anda memiliki domain yang sudah diarahkan nameserver-nya ke Cloudflare dan mode proxy (logo awan oranye) dalam keadaan aktif agar Cloudflare Workers dapat mencegat dan memanipulasi request di edge.

Sebelum kita menyalakan kompor dan mengetik perintah pertama, mari kita lihat peta jalan singkat dari apa yang akan kita bangun agar arah perjalanan kita terpetakan dengan jelas.

2. Peta Jalan Singkat: Apa yang Sedang Kita Rakit

Bayangkan arsitektur kita seperti sebuah restoran cepat saji bertaraf internasional. Next.js adalah dapur pusat yang memasak makanan segar, sementara Cloudflare Workers adalah pelayan kilat di berbagai kota di seluruh dunia yang menyimpan menu favorit di etalase terdekat.

Langkah pertama, kita akan menyiapkan fondasi aplikasi Next.js dan mengatur konfigurasi build-nya. Langkah kedua, kita meracik strategi ISR (Incremental Static Regeneration) yang dikawinkan dengan Cloudflare Cache API dan Workers. Langkah ketiga, kita memperketat keamanan dan mengoptimalkan Core Web Vitals. Mari kita mulai eksekusinya sekarang.

3. Langkah 1: Mempersiapkan Fondasi & Environment

Buka terminal Anda, mari kitainisiasi atau masuk ke dalam direktori project Next.js yang sudah ada. Kita perlu memastikan bahwa dependensi kita bersih dan siap dikawinkan dengan runtime edge.

# Masuk ke direktori project Next.js Anda
cd /var/www/my-enterprise-app

# Pastikan dependensi utama terinstal dengan versi stabil
npm install next@latest react@latest react-dom@latest

Perhatikan respons di terminal Anda—pastikan tidak ada konflik peer dependency. Jika proses instalasi berjalan bersih, itu tanda bahwa fondasi pertama kita sudah kokoh dan siap menerima bumbu konfigurasi berikutnya.

4. Langkah 2: Meracik Konfigurasi Inti Tanpa Basa-basi

Sekarang kita masuk ke bagian inti: mengatur strategi ISR dan menangkap request di Cloudflare Workers. Buat sebuah file middleware atau worker script untuk mendelegasikan cache kontrol secara presisi. Kita ingin halaman dinamis di-render ulang secara background tanpa membuat user menunggu.

// worker.js - Ditempatkan di Cloudflare Workers
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const cache = caches.default;
  
  // Cek apakah aset sudah ada di Edge Cache
  let response = await cache.match(request);
  
  if (response) {
    // Tambahkan header debug untuk membuktikan ini dari Edge
    response = new Response(response.body, response);
    response.headers.set('X-Edge-Cache', 'HIT');
    return response;
  }

  // Jika MISS, ambil dari origin Next.js
  response = await fetch(request);
  
  if (response.status === 200) {
    // Kloning respons dan simpan di cache edge selama 60 detik (SWR pattern)
    response = new Response(response.body, response);
    response.headers.set('Cache-Control', 'public, max-age=0, s-maxage=60, stale-while-revalidate=300');
    event.waitUntil(cache.put(request, response.clone()));
    response.headers.set('X-Edge-Cache', 'MISS');
  }

  return response;
}

[!TIP] Penggunaan header stale-while-revalidate adalah kunci utama arsitektur enterprise. Pengguna akan langsung mendapatkan respons instan dari cache, sementara edge memperbarui cache di latar belakang secara diam-diam.

Dengan konfigurasi di atas, beban server origin kita akan terpangkas hingga 90%. Namun, sebuah hidangan kelas atas tidak akan sempurna tanpa bumbu pengaman dan penyedap performa.

5. Langkah 3: Sentuhan Akhir Keamanan & Optimasi

Di level enterprise, kecepatan harus berjalan seiring dengan keamanan dan skor Core Web Vitals yang hijau royo-royo. Masuklah ke dashboard Cloudflare Anda, lalu aktifkan fitur berikut:

1. Auto Minify: Aktifkan untuk HTML, CSS, dan JS.
2. Brotli Compression: Pastikan aktif untuk memangkas ukuran transfer payload.
3. WAF (Web Application Firewall): Buat aturan rate limiting untuk mencegah serangan DDoS layer 7 pada endpoint SSR yang berat.

Tambahkan juga konfigurasi caching pada next.config.js Anda agar header dari origin selaras dengan kebijakan edge:

// next.config.js
module.exports = {
  reactStrictMode: true,
  poweredByHeader: false,
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

Periksa kembali konfigurasi Anda. Jika seluruh berkas tersimpan rapi, saatnya kita menyalakan pengujian lapangan untuk melihat hasil racikan kita.

6. Tes Rasa: Memastikan Semuanya Berjalan Sempurna

Saatnya melakukan uji coba menggunakan curl untuk melihat header respons secara langsung dari terminal:

curl -I https://domain-anda.com/

Perhatikan baris respons yang keluar. Pada akses pertama, Anda akan melihat header X-Edge-Cache: MISS. Jalankan perintah yang sama sekali lagi, dan saksikan perubahannya menjadi X-Edge-Cache: HIT dengan waktu latensi (Time to First Byte / TTFB) yang drop di bawah 50 milidetik.

[!WARNING] Jika status cache masih tertulis MISS pada percobaan kedua, periksa kembali apakah ada cookie atau parameter query string yang ikut terkirim, karena Cloudflare secara default mengabaikan cache jika mendeteksi header tertentu.

7. Pertolongan Pertama: Jika Terjadi Kendala Kecil

Di dunia infrastruktur nyata, error kecil adalah sahabat karib. Jika Anda mendapati halaman mengalami infinite redirect loop, biasanya itu disebabkan oleh konflik antara aturan SSL Full (Strict) di Cloudflare dengan sertifikat SSL di origin server Nginx/Caddy Anda. Pastikan mode SSL Cloudflare diset ke Full (Strict) dan perbarui sertifikat origin Anda.

Jika perubahan kode Next.js Anda tidak kunjung tampil di layar, jangan panik—cukup tekan tombol Purge Everything di tab Caching Cloudflare, atau jalankan skrip invalidasi cache via Cloudflare API. Selamat menikmati arsitektur web modern yang tangguh, cepat, dan siap mengguncang trafik jutaan pengguna!