Alasan Terjadinya Masalah Optimasi

Framer meningkatkan kinerja dan kompatibilitas di semua perangkat dengan mempersiapkan rendering halaman di server (pre-rendering). Namun, ada beberapa batasan dalam proses ini:

• API khusus browser seperti window, document, dan navigator tidak dapat digunakan di server karena server bukan lingkungan browser.

• Kode kustom yang bergantung pada API browser dapat menyebabkan kesalahan saat pre-rendering.

Hindari Penggunaan API Khusus Browser

Silakan menulis JavaScript yang tidak bergantung pada API browser saat render. Sebagai contoh, lebih baik memanfaatkan HTML media query untuk membuat layout responsif ketimbang menggunakan window.innerWidth.

jsx
// ❌️ 잘못된 예시: 최적화 문제 발생
export function Component() {
  const windowWidth = window.innerWidth

  return windowWidth < 768 ? <MobileVideo /> : <DesktopVideo />
}

// ✅ 올바른 예시: 최적화 문제 없음
function Component() {
  return <>
    <style>{`
      .my-component-video-mobile { display: block }
      .my-component-video-desktop { display: none }
        
      @media (min-width: 768px) {
        .my-component-video-mobile { display: none }
        .my-component-video-desktop { display: block }
      }
    `}</style>
    <div className="my-component-video-mobile"><MobileVideo /></div>
    <div className="my-component-video-desktop"><DesktopVideo /></div>
  </>
}

Masukkan API Browser ke dalam useEffect

Jika perlu menggunakan API browser, disarankan untuk menempatkannya di dalam useEffect. Karena useEffect dieksekusi setelah halaman dimuat di browser, ini tidak dipanggil selama rendering server sehingga bisa menghindari kesalahan optimasi.

jsx
// ❌️ 잘못된 예시: 최적화 문제 발생
function Component() {
  window.gtag("event", "component_rendered")

  return <div>Hello!</div>
}

// ✅ 올바른 예시: 최적화 문제 없음
function Component() {
  useEffect(() => {
    window.gtag("event", "component_rendered")
  }, [])

  return <div>Hello!</div>
}

Gunakan Placeholder untuk Data yang Bergantung pada Browser

Jika Anda memerlukan informasi yang hanya bisa diperoleh di browser seperti document.cookie atau navigator.language, pertimbangkan metode berikut:

1. Tampilkan hanya placeholder saat server rendering.

2. Setelah halaman sepenuhnya dimuat, perbarui komponen berdasarkan data tersebut.

Contoh: framer-optim-1.jsx

Cara Mengecualikan dari Optimasi

Jika perlu, Anda dapat mengecualikan (opt-out) komponen dari optimasi:

• Gunakan logika di sisi server untuk mengabaikan pre-rendering.

Catatan Penting

• Konten komponen tidak terekspos ke mesin pencari.

• Hanya ditampilkan setelah seluruh halaman dimuat.

• Disarankan juga menyediakan placeholder untuk meningkatkan kegunaan.

Contoh: framer-optim-2.jsx

Terapkan Pendekatan yang Sama pada Override

Untuk custom override, gunakan metode berikut:

• Gunakan placeholder atau

• Kecualikan dari optimasi

Contoh: framer-optim-3.jsx

Perlu Bantuan Tambahan?

Jika masalah belum teratasi, silakan hubungi melalui Halaman Kontak Framer atau lihat Developer Space.

Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer 'How to fix custom code optimization errors like “Cannot Set Property of Undefined"'.