Optimasi Performa React & Next.js Application

React dan Next.js adalah kombinasi powerful untuk membangun web applications modern. Namun tanpa optimasi yang tepat, aplikasi bisa menjadi lambat dan boros resource. Artikel ini membahas teknik-teknik praktis untuk meningkatkan performa React/Next.js application.

⚡ Core Web Vitals

Google menggunakan tiga metrik utama untuk mengukur performa web:

• LCP (Largest Contentful Paint) — Waktu loading elemen terbesar. Target: < 2.5 detik
• FID (First Input Delay) — Waktu respons terhadap interaksi pertama. Target: < 100ms
• CLS (Cumulative Layout Shift) — Stabilitas visual layout. Target: < 0.1

🖼️ Image Optimization

Images sering menjadi penyebab utama page lambat:

// Next.js Image component dengan automatic optimization
import Image from 'next/image';

<Image
  src="/images/hero.webp"
  alt="Hero image"
  width={1200}
  height={630}
  priority  // Preload untuk above-the-fold images
  placeholder="blur"
/>

Tips tambahan:

• Gunakan format WebP atau AVIF
• Implement lazy loading untuk below-the-fold images
• Tentukan width dan height untuk mencegah layout shift
• Gunakan CDN untuk image delivery

🧩 Code Splitting & Lazy Loading

Jangan load semua JavaScript sekaligus:

import dynamic from 'next/dynamic';

// Dynamic import dengan loading state
const HeavyChart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false  // Skip SSR untuk client-only components
});

🗃️ Caching Strategy

Static Generation (SSG)

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 3600  // ISR: regenerate setiap 1 jam
  };
}

Client-side Caching

Gunakan SWR atau React Query untuk intelligent client-side data caching dengan automatic revalidation.

📦 Bundle Analysis

Analisa bundle size secara rutin:

npx @next/bundle-analyzer

Identifikasi dan remove:

• Unused dependencies
• Large libraries yang bisa diganti dengan alternatif ringan
• Duplicate packages

🎯 Quick Wins

1. Enable compression — Gzip/Brotli di Nginx atau Next.js config
2. Reduce third-party scripts — Setiap script menambah blocking time
3. Use React.memo — Hindari re-render komponen yang tidak berubah
4. Prefetch links — Next.js <Link> secara default melakukan prefetch
5. Database queries — Optimasi API routes agar response cepat

Performa bukan fitur — ini adalah requirement fundamental dari setiap sistem production.