Arsitektur Nuxt 4 + Laravel API: Pola Fullstack Modern & Skalabel

Memadukan Nuxt 4 sebagai lapisan presentasi interaktif dan Laravel sebagai pondasi API bisnis merupakan kombinasi yang sangat matang bagi developer modern. Di satu sisi, kita mendapatkan reaktivitas Vue 3 dengan kecepatan engine Nitro, dan di sisi lain kita menikmati kemudahan Eloquent ORM, ekosistem queue, serta keamanan Laravel.

Namun, mengintegrasikan keduanya secara elegan membutuhkan pemahaman arsitektur yang solid agar frontend tetap ringan dan backend tidak terbebani permintaan yang redundan.

1. Strategi Autentikasi: Sanctum vs Token Bearer

Ketika membangun arsitektur SPA/SSG bersama Laravel, pertanyaan pertama selalu berkisar pada: apakah menggunakan session cookie berbasis Sanctum atau Token Bearer JWT?

• Stateful Cookie (Sanctum SPA): Sangat direkomendasikan jika frontend Nuxt dan Laravel berjalan pada root domain atau subdomain yang sama (misal app.dika.dev dan api.dika.dev). Cookie httpOnly memberikan proteksi bawaan terhadap serangan XSS.
• Bearer Token: Lebih fleksibel jika frontend di-hosting pada platform terpisah (misal di Vercel SSG murni) tanpa domain sharing atau saat melayani multi-client (mobile app & web).

// Contoh implementasi composable useApi di Nuxt
export const useApi = () => {
  const config = useRuntimeConfig()
  const token = useCookie('auth_token')

  return $fetch.create({
    baseURL: config.public.apiBase || 'https://api.domain.com/api',
    headers: token.value ? { Authorization: `Bearer ${token.value}` } : {},
    onResponseError({ response }) {
      if (response.status === 401) {
        // Redirect ke login atau trigger refresh token
      }
    }
  })
}

2. Standarisasi Response Format dengan API Resources

Hindari mengembalikan model Eloquent langsung ke frontend. Selalu gunakan JsonResource di Laravel untuk memastikan format data konsisten dan data sensitif (seperti password hash atau deleted_at) tidak bocor:

namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class ProjectResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
            'slug' => $this->slug,
            'description' => $this->description,
            'technologies' => $this->technologies,
            'demo_url' => $this->demo_url,
            'github_url' => $this->github_url,
            'created_at' => $this->created_at->toISOString(),
        ];
    }
}

3. Menghindari "Over-fetching" dengan TypeScript DTO

Di sisi Nuxt, kita mendefinisikan interface TypeScript yang mencerminkan kontrak API dari Laravel:

// types/project.ts
export interface Project {
  id: number
  title: string
  slug: string
  description: string
  technologies: string[]
  demo_url?: string
  github_url?: string
  created_at: string
}

Dengan TypeScript yang ketat, komponen Vue kita mendapatkan autocomplete dan type checking penuh saat melakukan kompilasi, mencegah kesalahan penamaan field sebelum aplikasi masuk ke produksi.

4. Nuxt SSG & Static Prerendering

Untuk situs portofolio atau blog publik, arsitektur terbaik adalah Pure SSG. Nuxt memanggil endpoint Laravel saat waktu build (nuxt generate), menyimpan hasilnya sebagai HTML dan JSON statis. Dengan begitu:

1. Waktu respon pengunjung mendekati 0ms (dilayani langsung dari edge CDN Vercel).
2. Server Laravel tidak dihujani request untuk konten yang jarang berubah.
3. Keamanan meningkat karena server database tidak terekspos langsung ke traffic publik.

Kombinasi ini memberikan performa terbaik dari kedua dunia: kenyamanan pengembangan Laravel dan kecepatan absolut Nuxt statis.