Aplikasi web modern berbasis Server-Side Rendering (SSR) seperti Next.js atau Nuxt sering kali menghasilkan antarmuka rusak saat diakses oleh browser perangkat lawas (legacy PDA, e-reader, atau browser berbasis NetFront dan Pocket Internet Explorer). Masalah utama bukan ketiadaan data, melainkan kegagalan proses hidrasi (hydration mismatch) dan parser HTML kuno yang memicu mutasi DOM sebelum runtime JavaScript modern sempat mengeksekusi kode secara aman.

Penyebab Render Mismatch pada Mesin Browser Kuno

Browser lawas memiliki dua limitasi kritis: parser HTML yang tidak toleran terhadap spesifikasi HTML5 modern, serta mesin JavaScript (seperti ECMAScript 3 atau versi awal ES5) yang langsung menghentikan eksekusi script saat menemukan syntax baru. Kegagalan terjadi melalui dua fase berikut:

  • DOM Auto-Correction Parsing: Tag struktural modern (seperti <main>, <section>, atau penutupan tag non-standar) sering diubah paksa oleh parser kuno menjadi pasangan tag tak terduga atau dilempar ke luar hierarchy. Ketika framework SSR mencoba mencocokkan virtual DOM dengan DOM asli hasil parsing browser, ketidakcocokan struktur node langsung memicu hydration mismatch error.
  • Script Crash saat Bootstrapping: Script runtime modern memicu parsing syntax error fatal (misal: penggunaan arrow function atau optional chaining di bundle utama), meninggalkan event listener tidak terpasang dan status UI tergantung dalam kondisi rendering server setengah matang.

Deteksi Feature-Support di Sisi Server (Edge/Middleware)

Pencegahan hidrasi fatal paling efisien dilakukan sebelum aset JavaScript dikirimkan ke klien. Alih-alih mengeksekusi polyfill raksasa yang memperlambat PDA dengan prosesor 200–400 MHz, gunakan deteksi User-Agent di middleware server untuk memutuskan apakah bundle hidrasi perlu dikirimkan.

// middleware.js atau server entry point
export function middleware(request) {
  const userAgent = request.headers.get('user-agent') || '';
  
  // Pola deteksi browser legacy PDA dan engine tua
  const isLegacyBrowser = /NetFront|Opera Mini|Windows CE|Pocket PC|IEMobile|Blazer|PlayStation/i.test(userAgent);
  
  const response = NextResponse.next();
  if (isLegacyBrowser) {
    // Flag downstream rendering untuk menonaktifkan script hidrasi
    response.headers.set('x-legacy-mode', 'true');
  }
  return response;
}

Dengan menandai request melalui HTTP header internal, layer perender dapat melepas tag <script> hidrasi otomatis dan mengembalikan representasi murni dokumen HTML statis (zero-JS client).

Isolasi Hydration Boundary dan Fallback No-Script

Jika aplikasi tetap harus melayani browser modern dan lawas dari runtime codebase yang sama tanpa middleware terpisah, hydration boundary harus diisolasi ketat. Komponen dinamis yang rentan menghasilkan DOM berbeda antara server dan klien wajib dipagari.

// LegacySafeBoundary.jsx
import { useState, useEffect } from 'react';

export default function LegacySafeBoundary({ children, fallback }) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    // Hanya berjalan jika JS engine mampu mengeksekusi script
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return (
      <div suppressHydrationWarning={true}>
        {fallback}
      </div>
    );
  }

  return <>{children}</>;
}

Gunakan atribut suppressHydrationWarning hanya pada kontainer pembungkus data non-deterministik (misalnya tanggal lokal atau atribut platform-specific). Hindari pemakaian atribut ini secara global di tag <body> karena hanya menutupi gejala tanpa mencegah overhead CPU akibat tree re-rendering.

Sanitasi Tag HTML untuk Parser Mesin Lawas

Parser HTML lawas (khususnya Trident v4 ke bawah atau parser proprietary PDA) memiliki aturan ketat terkait elemen inline dan block-level. Kesalahan struktur berikut sering merusak pohon DOM:

  • Elemen Block di Dalam Elemen Inline: Meletakkan <div> atau <p> di dalam tag <a> valid di HTML5, namun parser kuno akan menutup tag <a> secara prematur, menciptakan node hantu yang merusak indeks pohon hidrasi.
  • Custom Element Tanpa Display Property: Custom component tags seperti <my-island> dianggap tag tidak dikenal dan otomatis diperlakukan sebagai inline non-standard, mengakibatkan layout collapse.
  • Entity Karakter dan Whitespace Text Node: Text node kosong antar tag akibat minifier modern sering disalahartikan oleh parser lama, menciptakan selisih jumlah childNodes.

Gunakan struktur semantic primitif untuk layout SSR dasar:

<!-- Hindari: parser lawas sering memecah node ini -->
<a href="/item">
  <div class="card">Konten</div>
</a>

<!-- Gunakan: kompatibel lintas parser tua dan modern -->
<div class="card">
  <a href="/item" class="title-link">Konten</a>
</div>

Strategi Graceful Degradation: SSR Statis Murni

Langkah pamungkas mengatasi render mismatch pada PDA dan browser kuno adalah mengembalikan arsitektur ke Web 1.0 progressive enhancement: server mengirimkan HTML murni dengan styling CSS table/block dasar, interaksi form dikelola via request POST/GET standar, dan script hidrasi modern diabaikan sepenuhnya.

Rekomendasi Arsitektur: Jangan memaksakan polyfill ES2015+ pada perangkat dengan memori RAM < 64MB. Matikan hidrasi total untuk user-agent target dan biarkan antarmuka terender sebagai dokumen statis yang fungsional.