Panduan Optimasi Pure SSG pada Nuxt: Kecepatan Instan di Vercel

Banyak situs web modern menderita sindrom "kelebihan bobot JavaScript". Framework canggih sering kali menghasilkan bundle ratusan kilobyte yang sebenarnya tidak diperlukan untuk halaman yang mayoritas berisi teks, dokumentasi, atau portofolio.

Dengan Pure SSG (Static Site Generation) pada Nuxt 4, kita dapat memangkas waktu Time to First Byte (TTFB) hingga mendekati nol dan menyajikan halaman statis murni yang di-cache di seluruh CDN global Vercel.

Kenapa Memilih Pure SSG Dibanding SSR?

Untuk situs pribadi, blog, atau showcase karya:

• Biaya Nol & Bebas Maintenance Server: Tidak ada proses Node.js yang berjalan di background, tidak ada kekhawatiran memori bocor (memory leak) atau restart process.
• Keamanan Absolut: Tidak ada celah Remote Code Execution (RCE) di sisi server karena yang disajikan hanyalah file HTML, CSS, dan aset statis.
• Skalabilitas Tak Terbatas: Jika artikel Anda viral di media sosial, CDN Vercel dapat menangani jutaan kunjungan per detik tanpa server ambruk.

Trik 1: Konfigurasi Nitro Prerender Crawler

Di nuxt.config.ts, pastikan Nitro diinstruksikan untuk merayapi semua link internal saat proses build:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
        '/blog',
        '/proyek',
        '/teman',
        '/garasi',
        '/404.html'
      ]
    }
  }
})

Dengan crawlLinks: true, setiap kali Anda menambahkan artikel baru di folder content/, Nitro otomatis mendeteksi link tersebut dari halaman /blog dan mengompilasinya menjadi file HTML fisik mandiri.

Trik 2: Offline Icon Bundling (@nuxt/icon)

Salah satu penyebab build lambat atau ikon berkedip saat pertama kali dibuka adalah request jaringan ke remote iconify CDN. Kita dapat memaksa @nuxt/icon untuk mengemas koleksi ikon secara lokal:

icon: {
  serverBundle: 'local',
  clientBundle: {
    scan: true, // Otomatis memindai file SFC untuk ikon yang digunakan
  }
}

Hasilnya:

1. Tidak ada dependensi jaringan luar saat prerender berlangsung.
2. File SVG di-injeksi langsung ke dalam HTML atau asset bundle lokal.
3. Nol layout shift (CLS 0.00).

Trik 3: Menjaga Palet Minimalis Geist

Gaya desain Vercel Geist bukan hanya indah, tetapi juga ramah performa:

• Hindari library animasi berat yang memuat puluhan kilobyte matematika matrix jika cukup ditangani CSS transitions bawaan.
• Gunakan Tailwind CSS dengan purging otomatis. Hanya kelas yang benar-benar digunakan yang disertakan dalam berkas CSS akhir (~12-15 kB gzip).
• Hindari penggunaan canvas background grid dinamis atau partikel mouse hover yang membebani GPU perangkat pengunjung.

Dengan tiga prinsip di atas, website ini berhasil meraih skor sempurna 100/100 pada seluruh metrik Google Lighthouse.