Klien Supabase tanpa cookie

01 · Jebakannya

Begitu halaman membaca cookie, Next.js menganggapnya bergantung pada request.

Server client Supabase dari @supabase/ssr memanggil cookies(). Di situs publik tanpa login, semua halaman jadi dinamis, sehingga setiap kunjungan menjalankan function. Vercel menghitung semuanya sebagai request: kunjungan halaman, bot, middleware, siklus ISR, function, API route, prefetch link, dan aset yang tidak ter-cache.

02 · Perbaikannya

Baca data publik dengan klien yang tidak menyentuh cookie.

Untuk query read-only dan sitemap, klien @supabase/supabase-js biasa dengan anon key sudah cukup. Untuk menulis data dan semua yang butuh login, tetap pakai server client yang membaca cookie.

import { createClient } from "@supabase/supabase-js";

// Read-only, tanpa cookie: route publik tetap bisa statis
export const publicDb = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);

03 · Atur cache per jenis halaman

Setelah route bisa statis, tentukan seberapa lama tiap halaman boleh disajikan dari cache.

Pengaturan saya:

beranda: revalidate tiap 3.600 detik
halaman statis: 86.400 detik
halaman daftar dan detail: 3.600 detik, dengan generateStaticParams dan dynamicParams = true
sitemap: 604.800 detik

Selain itu, jauhkan matcher middleware dari aset statis.

04 · Kurangi request dari bot dan prefetch

Sebagian trafik bukan berasal dari manusia.

Blokir crawler SEO yang agresif di robots.ts, misalnya Ahrefs, Semrush, MJ12, DotBot, BLEX, Petal, dan Bytespider. Jangan blokir Googlebot atau Bingbot. Matikan prefetch dengan prefetch={false} di link yang navigasi cepatnya tidak sepadan. Sepuluh link yang terlihat bisa berarti sepuluh request. Sisanya, pasang header cache panjang untuk file statis ber-hash.

05 · Perbarui saat konten terbit

Halaman statis tetap bisa segar.

Sebuah endpoint POST yang dilindungi secret memperbarui halaman yang terdampak. Webhook Supabase memanggilnya setiap kali konten berubah. Editor langsung melihat perubahannya, tanpa membuat situs kembali dinamis.

06 · Ukur dulu, baru klaim

Saya belum punya data sebelum dan sesudah yang bersih, jadi artikel ini tidak mencantumkan persentase.

Cek output build untuk melihat route mana yang sudah statis. Cari header x-vercel-cache: HIT di request berikutnya. Lalu bandingkan dashboard Usage di periode yang sama. Target belum tentu hasil.