Belajar ReactJS - Networking Performance

#Pendahuluan

Kecepatan aplikasi React ditentukan sebagian besar oleh jaringan: berapa byte yang diunduh, berapa request yang dikirim, dan seberapa sering. Episode 14 membahas strategi networking yang membuat aplikasi terasa instan meskipun sumbernya banyak.

Kita mulai dari HTTP caching dan pola stale-while-revalidate, lalu code splitting dengan bundle analysis untuk melihat ukuran bundle sebenarnya, prefetching data dan assets, dan diakhiri dengan cara monitoring performa jaringan agar regresi terdeteksi lebih awal.

#HTTP Caching dan Stale-While-Revalidate

#Cache-Control di Respons Server

Caching terbaik dimulai di respons HTTP. Header Cache-Control memberi tahu browser berapa lama menyimpan respons:

Cache-Control: public, max-age=3600, stale-while-revalidate=86400

max-age=3600 menyimpan respons satu jam, dan stale-while-revalidate=86400 mengizinkan browser memakai versi basi satu hari sambil memperbarui di background. Hasilnya: request kedua terasa instan karena dijawab dari cache lokal.

#Stale-While-Revalidate di Level Aplikasi

Pola yang sama diterapkan di level JavaScript oleh SWR — nama library-nya memang diambil dari strategi ini:

SWR dengan data basi

import useSWR from "swr"
 
function Profil() {
  const { data } = useSWR("/api/profil", fetcher, {
    revalidateOnFocus: true,
    refreshInterval: 60000,
  })
 
  if (!data) return <p>Memuat...</p>
  return <p>Halo, {data.nama}</p>
}

useSWR("/api/profil", fetcher) langsung menampilkan data cache sambil mengambil data baru di background. refreshInterval: 60000 memperbarui tiap menit tanpa pengguna sadari.

#Code Splitting, Bundle Analysis, dan Lazy Loading

#Analisis Ukuran Bundle

Sebelum mengoptimalkan, ukur dulu. Vite menyediakan mode build dengan laporan visual:

npm install -D rollup-plugin-visualizer
npx vite build

Jalankan build dengan plugin visualizer untuk menghasilkan laporan interaktif berupa peta ukuran tiap module. Kalian akan langsung melihat modul mana yang membengkakkan bundle — misalnya library besar yang hanya dipakai satu fitur.

#Memecah Library Berat

Bundle besar sering berasal dari dependency yang tidak seharusnya masuk ke chunk awal. Pecah library berat menjadi chunk terpisah di vite.config.js:

manualChunks di Vite

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          charts: ["recharts"],
        },
      },
    },
  },
}

manualChunks memisahkan react/react-dom dan recharts ke chunk sendiri, sehingga mereka bisa di-cache browser secara terpisah. Library yang berubah jarang tidak perlu diunduh ulang saat kode aplikasi berubah.

#Lazy Loading untuk Semua yang Tidak Mendesak

Gabungkan code splitting berbasis route (episode 9) dengan lazy untuk komponen berat seperti editor atau chart. Hanya muat saat benar-benar dibutuhkan — kurangi beban pertama kali.

#Prefetching Data dan Assets

#Resource Hints di index.html

Halaman yang perlu memuat aset penting lebih awal bisa memakai resource hints:

<link rel="preconnect" href="https://api.example.com" />
<link rel="preload" href="/hero.png" as="image" />

<link rel="preconnect"> membuka koneksi lebih awal ke domain API, memangkas latensi handshake. <link rel="preload"> mengunduh gambar hero sebelum dibutuhkan, sehingga gambar muncul seketika saat render.

#Prefetch Data dengan queryClient

Seperti episode 13, gunakan prefetchQuery saat pengguna menuju halaman berikutnya. Gabungkan dengan onMouseEnter pada link dan useEffect pada route untuk menyiapkan data di background.

#Monitoring Network Performance

#Web Vitals dan Network Panel

Mulailah dengan alat yang sudah ada: Network panel di DevTools memperlihatkan jumlah request, ukuran transfer, dan waterfall tiap resource. Untuk metrik berkelanjutan, pantau Core Web Vitals:

• LCP (Largest Contentful Paint): kapan konten utama muncul.
• INP (Interaction to Next Paint): seberapa responsif aplikasi terhadap klik.
• CLS (Cumulative Layout Shift): seberapa stabil layout saat memuat.

npm run dev

Buka DevTools, tab Network, lalu muat ulang halaman dengan throttling ke Slow 4G. Catat berapa byte yang diunduh sebelum optimasi, lalu bandingkan setelah memecah bundle dan menambahkan cache — episode 22 akan mengotomatisasi pemantauan ini di produksi.

#Penutup

Episode 14 membuat aplikasi kalian cepat di jaringan: HTTP caching dengan stale-while-revalidate, code splitting dengan bundle analysis, prefetching data dan assets, serta monitoring performa dengan Web Vitals dan Network panel.

Inti yang harus dibawa pulang:

• Cache-Control dengan max-age dan stale-while-revalidate memangkas request.
• SWR menerapkan strategi data basi di level aplikasi.
• Ukur bundle dulu dengan visualizer, baru pecah library yang berat.
• manualChunks memisahkan vendor agar bisa di-cache terpisah.
• Preconnect dan preload mempercepat pengunduhan aset penting.
• Pantau LCP, INP, dan CLS untuk mengukur pengalaman nyata.

Di episode 15 selanjutnya kita akan membahas performance optimization — profiling dengan React DevTools dan browser tools, memoization dengan useMemo dan useCallback, virtualization untuk daftar panjang, serta pola menghindari render yang tidak perlu. Mari membuat React kalian seramping mungkin.