Advanced · Level 11: Production Next.jsAdvanced65 menitBahasa Indonesia

Supabase Client Boundaries

Menentukan kapan Supabase browser client atau server client digunakan, serta menjaga credential dan auth check pada boundary yang tepat.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan browser client dan server client Supabase untuk Next.js SSR
Menentukan lokasi client utility di lib/supabase
Memahami perbedaan publishable key dan secret server-only
Memilih getClaims, getUser, atau getSession sesuai kebutuhan

Next.jsSupabaseSSRClient BoundariesEnvironment Variables

Isi lesson

6 blok

1.
Satu provider, dua tempat menjalankan kodeBelum selesaiWajib
2.
Browser client memakai nilai publishableBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Publishable bukan berarti semua credential boleh dibukaBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Satu provider, dua tempat menjalankan kode

Wajib

Supabase dapat dipanggil dari browser maupun server, tetapi kedua tempat itu tidak memiliki tanggung jawab yang sama. Browser client dipakai pada Client Component ketika UI memang perlu berinteraksi dengan Supabase di browser. Server client dipakai dari Server Component, Server Action, Route Handler, atau service layer ketika app membaca session, mengambil data awal, atau menjalankan operasi yang harus tetap berada di server.

Buat utility client di satu lokasi seperti lib/supabase/client.ts dan lib/supabase/server.ts. Jangan membuat createClient baru secara acak di banyak component. Pemisahan ini membuat reviewer dapat melihat boundary data dengan cepat dan mengurangi risiko server-only code tidak sengaja masuk ke browser bundle.

Bagian ini memengaruhi progres lesson.

Browser client memakai nilai publishable

Wajib

tsx

// lib/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
  );
}

// app/dashboard/page.tsx
import { createClient as createServerClient } from "@/lib/supabase/server";

export default async function DashboardPage() {
  const supabase = await createServerClient();
  const { data } = await supabase.auth.getClaims();

  return <h1>Halo, {data?.claims.sub ?? "learner"}</h1>;
}

Browser utility memakai createBrowserClient dengan project URL dan publishable key yang memang dirancang untuk digunakan browser bersama RLS. Page server memakai utility server yang terpisah. Untuk melindungi halaman atau data, dokumentasi Supabase saat ini menyarankan getClaims karena token diverifikasi; getSession memberi raw session dan user object-nya tidak boleh menjadi satu-satunya dasar authorization di server.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify Supabase client boundaries

Lengkapi boundary map untuk browser client, server client, dan service role key yang tidak boleh digunakan di browser.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Di mana operasi yang memeriksa identity untuk melindungi page atau data paling tepat dilakukan?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Publishable bukan berarti semua credential boleh dibuka

NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY dapat tersedia di browser karena akses data tetap dibatasi oleh RLS. Ini berbeda dari service role key, session secret, database password, atau token server-only. Jangan pernah memberi prefix NEXT_PUBLIC_ pada secret, dan jangan pernah membuat service role client di browser atau memasukkannya ke source control.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Browser client dan server client memiliki lokasi serta tanggung jawab berbeda.
Utility Supabase sebaiknya disimpan terpusat di lib/supabase.
Publishable key dapat dipakai browser bersama RLS, sedangkan secret tetap server-only.
Gunakan getClaims untuk identity check saat melindungi page atau data pada server.
Berikutnya, kamu akan melihat mengapa RLS tetap penting walaupun UI sudah memiliki route protection.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Satu provider, dua tempat menjalankan kode.

Memuat progres Review module