Optimasi Performa Next.js 16 dan App Router

Optimasi Performa Next.js 16 dan App Router

Performa bukanlah fitur tambahan — ia adalah bagian dari user experience. Google menjadikan Core Web Vitals sebagai faktor ranking, dan pengguna modern memiliki ekspektasi tinggi terhadap kecepatan.

Mengapa Performa Penting?

+------------------------------------+
|  Waktu Load    |  Dampak          |
+------------------------------------+
|  1 detik       |  Optimal         |
|  2 detik       |  Masih baik      |
|  3 detik       |  53% bounce      |
|  5 detik       |  90% bounce      |
|  10 detik      |  Ditinggal       |
+------------------------------------+

1. React Server Components (RSC)

RSC adalah game changer. Komponen dirender di server, mengirim HTML siap pakai ke klien. Tidak ada JavaScript yang dikirim untuk komponen statis.

// app/page.tsx — INI ADALAH SERVER COMPONENT (default)
import { prisma } from "@/lib/prisma";

export default async function HomePage() {
  // Query langsung dari database — tanpa API endpoint!
  const projects = await prisma.project.findMany({
    where: { published: true },
  });

  return (
    <div>
      {projects.map(p => (
        <div key={p.id}>{p.title}</div>
      ))}
    </div>
  );
  // Hasil render: HTML saja, zero JavaScript!
}

2. Image Optimization dengan next/image

Komponen Image bawaan Next.js secara otomatis:

• Lazy loading (hanya muat gambar yang terlihat)
• Resize sesuai viewport
• Konversi ke WebP/Avif
• Placeholder blur saat loading

import Image from "next/image";

export default function BlogImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={400}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

3. Partial Prerendering (PPR)

Fitur baru Next.js 16 yang menggabungkan kekuatan SSG dan SSR dalam satu halaman:

+--------------------------------------------------------+
|  Halaman Blog                                         |
|  +--------------------------------------------------+  |
|  | [STATIC] Header + Navigasi (SSG - cepat)          |  |
|  | [DYNAMIC] Daftar Postingan (SSR - real-time)      |  |
|  | [STATIC] Footer (SSG - cepat)                     |  |
|  +--------------------------------------------------+  |
+--------------------------------------------------------+

4. Streaming dan Suspense

Streaming memungkinkan Anda mengirim konten secara progresif:

import { Suspense } from "react";

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<div>Loading stats...</div>}>
        <SlowComponent /> {/* Ini akan streaming */}
      </Suspense>
    </div>
  );
}

5. Route Segment Caching

Next.js 16 secara otomatis cache segmen rute yang statis. Anda bisa mengontrolnya:

// app/blog/page.tsx
export const dynamic = 'auto';       // default: cache sesuai kebutuhan
export const revalidate = 3600;     // re-generate setiap 1 jam
export const preferredRegion = 'iad1'; // deploy di region tertentu

Tabel Strategi Caching

---

Kesimpulan: Next.js 16 menyediakan alat-alat canggih untuk optimasi performa. Manfaatkan RSC untuk mengurangi bundle size, image optimization untuk loading cepat, dan streaming untuk用户体验 yang lebih baik.