LearnNext
Back to Dashboard

Data Fetching & Mutations

Mempelajari cara mengambil data di server dan mengubah data menggunakan Server Actions.

1. Server-side Fetching

Di Next.js App Router, Anda bisa melakukan fetch langsung di dalam Server Component sebagai fungsi async.

app/users/page.tsx
export default async function UsersPage() {
  // Fetching langsung di server!
  const res = await fetch('https://api.example.com/users', {
    next: { revalidate: 3600 } // Revalidate setiap jam
  });
  const users = await res.json();

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

2. Loading & Streaming

Gunakan file loading.tsx untuk membuat UI placeholder otomatis saat data sedang dimuat (menggunakan React Suspense di balik layar).

Streaming

Next.js akan mengirimkan bagian halaman yang sudah siap terlebih dahulu, sementara bagian yang berat (fetching) akan menyusul.

3. Server Actions (Mutations)

Server Actions adalah fungsi asynchronous yang dieksekusi di server. Bisa dipanggil langsung dari form atau event listener.

app/actions.ts
"use server"; // Menandai file ini berisi Server Actions

export async function createTodo(formData: FormData) {
  const title = formData.get('title');
  
  // Simpan ke database
  await db.todo.create({ data: { title } });
  
  // Refresh data di client otomatis!
  revalidatePath('/todos');
}

Interactive Demo: Server Action Simulator

Simulasi bagaimana form mengirimkan data ke server dan mendapatkan respon balik secara instan.

Server Connection: Active

Database (Mock)

No data in database

StatusReady
client-to-server-bridge.ts

Penting: Keamanan

Karena Server Actions berjalan di server, Anda bisa melakukan validasi server-side dan cek autentikasi di dalam fungsi action tersebut.