Adakah Next.js menyokong pemaparan bersyarat dan prapemarahan HTML yang tidak dipaparkan?

Question

Next.js pra-memaparkan HTML pada halaman yang hanya dipaparkan apabila butang tertentu diklik? Sebagai contoh, apabila kita mempunyai tab, adakah ia memaparkan kandungan tab yang belum dipaparkan?

Answer 1

Bukan sahaja untuk Next.js tetapi juga untuk React, ia bergantung pada cara anda menunjukkan/menyembunyikan komponen secara bersyarat, terutamanya jika ia disembunyikan oleh CSS atau JavaScript. Berikut adalah contoh:

// 1. 返回一个空片段或组件
const Component1 = ({ isVisible }) => {
  if (!isVisible) return <></>;
  return (
    <div>Hello World</div>
  )
}

// 2. 改变display属性
const Component2 = ({ isVisible }) => {
  const display = isVisible ? "flex" : "hidden";
  return (
    <div style={{ display }}>Hello World</div>
  )
}

1. Dalam contoh pertama, apabila isVisible属性设置为false serpihan kosong akan dipaparkan. Serpihan kosong tidak akan menghasilkan sebarang HTML.

2. Dalam contoh kedua, kami hanya menukar sifat display CSS mengikut atribut, dan HTML yang dijana akan tetap disertakan dalam HTML anda tanpa kelihatan.