Pelajari cara kerja streaming di Next.js — teknik canggih untuk menampilkan halaman lebih cepat tanpa menunggu seluruh data dimuat.

Mengapa Harus Peduli dengan Streaming?

Pernahkah kamu membuka halaman web yang terasa “berat”? Halamannya blank cukup lama, lalu tiba-tiba semuanya muncul sekaligus.
Sekarang bayangkan hal yang berbeda: halaman muncul sedikit demi sedikit — header, teks utama, lalu komentar menyusul. Tidak menunggu, tidak membosankan.

Itulah yang dimaksud dengan streaming.
Next.js (sejak versi 13 dengan App Router) menghadirkan cara baru untuk mengirim HTML secara bertahap, memungkinkan pengguna melihat sebagian halaman bahkan ketika data lain masih diproses di server.

Dengan streaming, pengguna tidak perlu menunggu seluruh halaman selesai di-render. Mereka langsung mendapatkan first impression lebih cepat.

Apa Itu Streaming di Next.js?

Secara sederhana, streaming adalah proses mengirim bagian halaman HTML sedikit demi sedikit dari server ke browser.
Browser bisa langsung menampilkan bagian yang sudah diterima, sementara bagian lainnya tetap diproses di belakang layar.

Kalau biasanya SSR (Server-Side Rendering) mengirim HTML lengkap sekaligus setelah semua data siap, maka streaming bekerja secara paralel:

• Bagian yang cepat diproses akan langsung dikirim.

• Bagian yang lambat menunggu data, tapi tidak menunda halaman utama.

Hasilnya? Render bertahap — halaman terasa ringan dan cepat.

Perbandingan Render Biasa vs Streaming

Streaming tidak selalu dibutuhkan, tapi untuk halaman berat atau data lambat, ini bisa jadi penyelamat performa.

Bagaimana Streaming Bekerja di Next.js?

Untuk memahami streaming, kamu perlu tahu tiga komponen utama di baliknya:

1. React Server Components (RSC) – memungkinkan komponen React dijalankan langsung di server, bukan di browser.

2. React Suspense – fitur untuk “menunda” render bagian tertentu sampai data siap, sambil menampilkan fallback UI.

3. Server-Sent Streaming – mekanisme agar server bisa mengirim potongan HTML secara bertahap ke browser.

Bayangkan kamu punya halaman berita. Bagian utama (judul + isi artikel) bisa langsung tampil, tapi komentar perlu waktu karena memanggil API. Dengan Suspense, kamu bisa memberi tahu React:

“Render dulu bagian artikel, nanti kalau komentar sudah siap baru tampilkan.”

Kapan Sebaiknya Menggunakan Streaming?

Streaming bukan solusi untuk semua kasus. Gunakan hanya jika ada perbedaan kecepatan antarbagian halaman.

Beberapa contoh ideal:

• Halaman berita: artikel utama tampil dulu, komentar menyusul.

• Dashboard analitik: statistik dasar tampil cepat, grafik berat di belakang.

• E-commerce: gambar produk muncul dulu, ulasan dan rekomendasi di-streaming kemudian.

Namun, jika semua data relatif cepat, penggunaan streaming justru membuat kode lebih rumit tanpa manfaat berarti.

Cara Menggunakan Streaming di Next.js

1. Streaming dengan React Suspense (App Router)

Misalkan kamu membuat halaman utama berita.

// app/page.tsx
import { Suspense } from "react";
import LatestPosts from "./LatestPosts";
import Comments from "./Comments";

export default function Home() {
  return (
    <div>
      <h1>Berita Hari Ini</h1>

      {/* Komponen yang cepat */}
      <Suspense fallback={<p>Memuat postingan terbaru...</p>}>
        <LatestPosts />
      </Suspense>

      {/* Komponen yang lambat */}
      <Suspense fallback={<p>Memuat komentar...</p>}>
        <Comments />
      </Suspense>
    </div>
  );
}

// app/LatestPosts.tsx
export default async function LatestPosts() {
  const res = await fetch("https://api.example.com/posts", {
    cache: "no-store",
  });
  const posts = await res.json();

  return (
    <ul>
      {posts.map((p: any) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

Di sini, Suspense menjadi kunci. Ia memberi tahu React: tampilkan UI loading dulu sambil menunggu data komponen itu siap. Begitu data selesai di-fetch, server akan mengirim sisa HTML ke browser.

Browser pun memperbarui tampilan secara otomatis — tanpa reload.

2. Streaming di API Route (Streaming Response)

Tidak hanya untuk HTML, Next.js juga memungkinkan streaming data mentah seperti teks atau JSON. Ini berguna misalnya untuk menampilkan log proses panjang atau respon real-time.

// app/api/stream/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      controller.enqueue(encoder.encode("Bagian 1\n"));
      await new Promise((r) => setTimeout(r, 1000));
      controller.enqueue(encoder.encode("Bagian 2\n"));
      await new Promise((r) => setTimeout(r, 1000));
      controller.enqueue(encoder.encode("Bagian 3\n"));
      controller.close();
    },
  });

  return new NextResponse(stream, {
    headers: { "Content-Type": "text/plain" },
  });
}

Browser akan menerima data sedikit demi sedikit:

Bagian 1
Bagian 2
Bagian 3

Ini cocok untuk proses real-time, misalnya laporan progres, live feed, atau hasil pemrosesan batch.

Best Practice dalam Menerapkan Streaming

1. Gunakan hanya pada bagian berat.
   Jangan bungkus seluruh halaman dengan Suspense. Fokuskan pada area yang memang lambat seperti grafik atau rekomendasi.

2. Pastikan bagian utama muncul cepat.
   Halaman utama (hero section, headline) sebaiknya tidak menunggu data lama.

3. Pakai fallback yang informatif.
   Gunakan placeholder yang natural seperti skeleton loader, shimmer, atau teks singkat agar pengguna tahu bahwa bagian tersebut masih dimuat.

4. Perhatikan caching.

   • Data jarang berubah → gunakan cache: 'force-cache' agar cepat.

   • Data sering berubah → gunakan cache: 'no-store' untuk selalu mengambil versi terbaru.

5. Jangan andalkan client-side fetching saja.
   Streaming bekerja di tingkat server. Jika kamu hanya menggunakan useEffect di client untuk fetch data, kamu kehilangan manfaat streaming sepenuhnya.

6. Pertimbangkan SEO.
   Jangan men-stream konten yang penting untuk SEO (seperti judul atau isi artikel). Pastikan bagian tersebut di-render terlebih dahulu.

Studi Kasus: Website Berita

Bayangkan situs berita seperti ini:

• Header + headline berita utama → langsung tampil.

• Komentar + related news → menunggu API eksternal.

Dengan streaming, pengguna bisa langsung membaca artikel utama tanpa menunggu komentar selesai dimuat. Pengalaman membaca jadi lebih cepat, interaktif, dan terasa smooth.

Ringkasan Perbandingan

Tips Tambahan: Debugging dan Monitoring

Kadang streaming bisa sulit dilihat hasilnya secara kasat mata.
Untuk memastikannya bekerja:

• Gunakan Network tab di DevTools → perhatikan apakah HTML dikirim bertahap.

• Aktifkan logging pada server untuk melihat kapan bagian dikirim.

• Tes di lingkungan production build, karena streaming kadang tidak terlihat di mode dev (karena dev server lebih lambat dan buffering-nya berbeda).

FAQ

1. Apakah streaming mempercepat semua halaman Next.js?
Tidak. Streaming hanya membantu jika ada bagian halaman yang lambat. Jika semua data cepat, hasilnya sama saja dengan render biasa.

2. Apakah streaming bekerja di client-side navigation (misalnya lewat Link)?
Tidak sepenuhnya. Streaming terutama terjadi pada render awal dari server. Navigasi antarhalaman yang sudah di-hydrate di client tidak lagi menggunakan streaming.

3. Apakah streaming mempengaruhi SEO?
Tidak jika digunakan dengan benar. Pastikan konten utama (judul, deskripsi, artikel) di-render tanpa delay.

4. Apakah bisa digabung dengan ISR (Incremental Static Regeneration)?
Bisa, tapi tidak selalu relevan. ISR digunakan untuk caching halaman statis, sedangkan streaming fokus pada kecepatan render bagian dinamis.

5. Bagaimana dengan kompatibilitas browser?
Semua browser modern mendukung streaming HTML. Namun, pada browser lama, fallback-nya tetap berupa SSR penuh.

Kesimpulan

Streaming di Next.js membuka cara baru untuk menghadirkan pengalaman web yang lebih cepat dan responsif. Dengan memanfaatkan Suspense dan server components, kamu bisa menampilkan halaman bertahap tanpa menunggu semua data selesai.

Gunakan teknik ini secara bijak: fokus pada bagian yang benar-benar lambat, pastikan loading UI-nya nyaman, dan selalu uji performa di lingkungan produksi.

Next.js tidak hanya membuat halaman lebih cepat, tapi juga lebih pintar dalam cara halaman dikirim ke pengguna.