Cara Marketer Indonesia Pasang CSS field-sizing: content di Next.js untuk Form Kontak, Pangkas 6 KB Library Autosize dan Hilangkan Hydration Mismatch SSR di 2026

TL;DR: CSS field-sizing: content membuat textarea dan input Next.js otomatis menyesuaikan ukuran ke isi tanpa JavaScript. Cukup tambah satu deklarasi di globals.css plus min/max constraint. Di proyek form kontak klien selama 2026, ini memangkas 6 KB bundle library autosize dan menghilangkan hydration mismatch SSR yang biasa muncul saat textarea diukur ulang di client.

Di banyak proyek website bisnis yang saya kerjakan, form kontak adalah komponen kecil dengan ekor masalah panjang. Pertama, autosize textarea hampir selalu butuh library JS pengukur tinggi. Kedua, library ini sering memicu mismatch di SSR karena render server tidak tahu ukuran konten browser. Ketiga, semua ini menambah beban INP di halaman yang seharusnya ringan.

Selama Q1 2026, saya mulai mengganti library autosize dengan deklarasi CSS field-sizing: content di proyek-proyek baru. Hasilnya: bundle JS form turun rata-rata 4 sampai 7 KB, hydration mismatch hilang sepenuhnya, dan INP stabil di bawah 50 ms bahkan saat user menempel teks panjang.

Konteks Masalah: Kenapa Autosize JS Bikin SSR Bermasalah

Library autosize bekerja dengan mengukur scrollHeight dan menerapkan inline height. Logikanya berjalan setelah hidrasi di client. Pada SSR Next.js, HTML pertama yang dikirim server tidak memuat tinggi terhitung, sehingga browser merender dengan tinggi default, baru kemudian script mengubah tinggi. Loncatan tinggi inilah sumber hydration mismatch yang sering memunculkan warning di console.

CSS field-sizing: content memindahkan logika ini ke layer rendering CSS. Browser tahu langsung ukuran final saat parsing, tanpa menunggu JavaScript.

Implementasi 4 Langkah

1. Update globals.css

@supports (field-sizing: content) {
  textarea.auto, input.auto {
    field-sizing: content;
    min-block-size: 4lh;
    max-block-size: 20lh;
  }
}

@supports memastikan deklarasi hanya aktif di browser pendukung. Per April 2026, Chrome, Edge, dan Safari Technology Preview sudah mendukung. Firefox masih flag, jadi cukup biarkan fallback default. Detail lengkap di MDN field-sizing.

2. Pasang di Atom Input

Di sistem atomic design proyek vitoatmo-2026, atom <Textarea> cukup menambahkan className auto. Tidak ada perubahan logic React, tidak ada useEffect baru.

3. Hapus Library Autosize

Bersihkan import react-textarea-autosize atau sejenis. Cek bundle analyzer untuk verifikasi penurunan ukuran chunk.

4. Verifikasi Tanpa Warning

Buka halaman kontak di dev mode, ketik teks panjang, pastikan tidak ada hydration warning di console. INP harus tetap di bawah 100 ms saat mengetik.

Studi Kasus Singkat

Saat mengganti form kontak Yuanita Sekar di awal April 2026, bundle form yang awalnya 11,2 KB turun ke 5,3 KB. Hydration warning yang sebelumnya muncul tiap kali user mengetik di textarea pesan hilang sepenuhnya. INP rata-rata di halaman kontak turun dari 92 ms ke 41 ms berdasarkan field data Vercel Speed Insights selama 14 hari setelah deploy.

Pola yang sama saya pakai di form pemesanan Vetmo dan form quotation klien personal-branding lain. Tidak ada satu kasus pun yang butuh polyfill.

Pertanyaan Umum

Apa bedanya field-sizing: content dengan textarea rows?

rows hanya menentukan tinggi awal. field-sizing: content membuat tinggi mengikuti isi secara dinamis tanpa JS.

Apakah Firefox akan rusak?

Tidak. Tanpa dukungan, browser jatuh ke ukuran default (atribut rows atau height CSS biasa). Form tetap berfungsi, hanya tidak auto-grow.

Bisakah dipakai untuk select dropdown?

Bisa. Select panjang juga akan menyesuaikan lebar ke option terpilih, berguna untuk filter dengan label dinamis.

Apakah ada dampak ke aksesibilitas?

Tidak negatif. Pembesaran terjadi pada elemen native, screen reader tetap mengakses konten dengan benar.

Penutup Aplikatif

Pasang hari ini di form kontak Anda. Risiko nol karena @supports melindungi browser non-pendukung. Penghematan bundle terlihat instan di Lighthouse, dan hydration warning yang menumpuk di Sentry akan berkurang dalam 1 hari setelah deploy.