Nextjs Route Handlers Server Actions Caching Revalidation Tags Data Mutation Flow

Next.js1 September 20263 menit baca

Nextjs Route Handlers Server Actions Caching Revalidation Tags Data Mutation Flow

Definisi

Route Handler adalah endpoint API di dalam Next.js App Router (file route.ts di dalam app/). Server Action adalah fungsi async yang dijalankan di server dan bisa dipanggil langsung dari komponen React (form atau event handler). Keduanya dipakai untuk mutasi data, tapi punya tempat yang beda.

Kapan dipakai

Route Handler: butuh endpoint HTTP eksplisit (Webhook, API eksternal, akses programatik, kontrol method GET/POST/PUT/DELETE manual).
Server Action: mutasi yang dipicu dari UI (submit form, tombol simpan) dan ingin langsung revalidate cache tanpa fetch manual dari client.

Kalau ragu, mutasi dari form lebih enak pakai Server Action; endpoint untuk client lain pakai Route Handler.

Cara kerja

Route Handler

// app/api/orders/route.ts
import { NextResponse } from 'next/server';
 
export async function POST(req:

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama Next.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

// app/actions.ts
'use server';
 
export async function createOrder(formData: FormData) {
    const order = await repo.create({
        total: Number(formData.get('total')),
    });
    revalidatePath('/orders');
    revalidateTag('orders');
    return order;
}

Nextjs Route Handlers Server Actions Caching Revalidation Tags Data Mutation Flow | Rujukan Pemrograman | Mahir.dev Academy

Nextjs Route Handlers Server Actions Caching Revalidation Tags Data Mutation Flow

Nextjs Route Handlers Server Actions Caching Revalidation Tags Data Mutation Flow

Definisi

Kapan dipakai

Cara kerja

Route Handler

Selesai membaca dokumentasi ini?

Server Action

Revalidation

Struktur alur mutasi

Contoh fetch dengan tag

Catatan implementasi

Kesalahan umum

Referensi terkait