Optimasi Next.js dengan Turbopack & React Server Components: Rahasia Performa 100/100 Lighthouse

Di tengah makin ketatnya penilaian Google Core Web Vitals (LCP, INP, CLS), performa frontend tidak lagi sekadar soal tampilan cantik, melainkan penentu utama ranking SEO dan angka konversi bisnis. Kombinasi Next.js dan Turbopack menghadirkan lompatan kecepatan yang signifikan.

Tiga Pilar Utama Arsitektur Modern Next.js

1. React Server Components (RSC): Komponen dieksekusi di server dan dikirim sebagai HTML + stream JSON payload, bukan JavaScript besar yang harus di-parse browser pengguna.
2. Partial Prerendering (PPR): Menggabungkan static shell instan dengan dynamic streaming hole dalam satu file rute.
3. Turbopack Bundler: Engine bundling berbasis Rust yang mampu melakukan fast-refresh dalam hitungan milidetik.

Contoh Implementasi Server Action Tanpa API Route Terpisah

Alih-alih membuat endpoint REST API terpisah, gunakan Server Action langsung di dalam komponen server:

// app/actions/contact.ts
"use server";

import { revalidatePath } from "next/cache";

export async function submitContact(formData: FormData) {
  const email = formData.get("email") as string;
  const message = formData.get("message") as string;

  if (!email || !message) {
    throw new Error("Form data tidak valid");
  }

  // Simpan ke database
  await db.query("INSERT INTO inquiries (email, message) VALUES ($1, $2)", [email, message]);

  revalidatePath("/kontak");
  return { success: true };
}

Konfigurasi Next.config.ts untuk Efisiensi Maksimal

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 hari cache
  },
  compress: true,
  poweredByHeader: false,
};

export default nextConfig;