Optimasi Network Requests Next.js: Strategi Performa Maksimal

Strategi Utama Optimasi Network Requests

Optimasi network requests pada Next.js berfokus pada pengurangan latensi, deduplikasi permintaan, dan pemanfaatan mekanisme caching bawaan framework. Inti dari performa Next.js terletak pada pemilihan strategi fetching yang tepat antara fetch API, SWR, atau React Query, serta pemanfaatan fitur Data Cache pada Next.js App Router.

1. Deduplikasi Request dengan Fetch API

Next.js secara otomatis melakukan deduplikasi request jika Anda menggunakan fetch di dalam React Component atau Server Components. Jika Anda memanggil fungsi yang sama dengan URL yang sama dalam satu render tree, Next.js hanya akan melakukan satu request ke server.

// Contoh deduplikasi otomatis
async function getData() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });
  return res.json();
}

// Di dalam Server Component, memanggil getData() dua kali 
// hanya akan menghasilkan satu network request.

2. Strategi Caching dan Revalidasi

Memahami kapan data harus diperbarui adalah kunci. Gunakan revalidate untuk data yang berubah secara berkala dan tags untuk on-demand revalidation.

3. Optimasi Client-Side dengan SWR atau React Query

Untuk data yang bersifat interaktif di sisi klien, gunakan library seperti SWR atau TanStack Query. Keduanya menyediakan fitur stale-while-revalidate, focus revalidation, dan caching yang jauh lebih efisien daripada menggunakan useEffect standar.

4. Implementasi Request Memoization

Jika Anda tidak menggunakan fetch (misalnya menggunakan ORM seperti Prisma), gunakan fungsi cache dari React untuk melakukan memoization pada fungsi database agar tidak terjadi query berlebih.

import { cache } from 'react';

export const getUser = cache(async (id) => {
  const user = await db.user.findUnique({ where: { id } });
  return user;
});

Tips Troubleshooting Lapangan

• Gunakan Network Tab: Selalu pantau waterfall di Chrome DevTools untuk melihat apakah ada request yang terblokir atau duplikat.
• Batasi Payload: Gunakan select pada query database atau GraphQL untuk hanya mengambil field yang dibutuhkan.
• Implementasi Compression: Pastikan server backend Anda mendukung Gzip atau Brotli untuk memperkecil ukuran transfer data.
• Edge Caching: Manfaatkan Vercel Edge Network atau CDN untuk menyimpan response di lokasi yang lebih dekat dengan pengguna.