Digital Transformation
Streaming Metadata
Pola rendering metadata HTML head secara streaming agar konten utama halaman tidak menunggu resolusi metadata async sebelum dikirim ke browser.
TL;DR: Streaming Metadata adalah pendekatan rendering yang mengirim body HTML lebih dulu sebelum tag metadata seperti title dan description selesai dihitung. Pola ini umum di Next.js dan Remix sejak 2024 untuk mempercepat first paint tanpa mengorbankan SEO, asalkan crawler menerima HTML lengkap saat respons selesai.
Apa itu Streaming Metadata?
Streaming Metadata memisahkan resolusi metadata head, seperti <title>, <meta description>, dan Open Graph, dari render konten body. Server mulai mengirim shell HTML beserta konten utama, lalu menyisipkan tag metadata di head saat data async (misalnya fetch dari database) selesai. Browser modern menangani pola ini lewat HTML streaming dan declarative shadow DOM.
Bedanya dengan SSR streaming klasik: SSR streaming fokus pada body, sedangkan streaming metadata khusus menjawab kasus head yang membutuhkan data eksternal.
Bagaimana Cara Kerjanya di Next.js 15
| Tahap | Yang dikirim ke browser |
|---|---|
| 0 ms | Shell <html><head>...</head><body> minimal |
| 50-200 ms | Body utama mulai mengalir lewat React Server Components |
| 200-500 ms | Tag metadata final disisipkan saat resolve |
| Final | HTML lengkap dengan metadata di posisi benar |
Crawler seperti Googlebot menunggu respons lengkap, sehingga metadata tetap terbaca utuh. Browser pengguna sudah memulai render lebih awal.
Kenapa Penting?
Tanpa streaming metadata, halaman dengan fetch lambat (misalnya produk e-commerce yang query harga dari API) menunda seluruh first byte. Marketer dan developer Indonesia yang menggunakan Next.js atau Remix dapat menurunkan TTFB hingga 30-50% pada halaman dinamis dengan mengaktifkan pola ini, sementara skor LCP ikut membaik karena konten utama mengalir lebih cepat.
Pertanyaan Umum
Apakah Googlebot membaca metadata yang di-streaming dengan benar?
Ya, selama respons HTTP selesai dengan tag metadata di posisi yang benar di head. Googlebot menunggu seluruh HTML sebelum parsing final, dokumentasi Google Search Central mengonfirmasi ini.
Bedanya dengan client-side meta tag injection?
Streaming metadata dilakukan di server sebelum HTML selesai dikirim, sedangkan client-side injection menambahkan tag setelah JavaScript hydration. Crawler yang tidak eksekusi JS hanya melihat versi server.
Istilah Terkait