Next.js支援條件渲染和預先渲染未呈現的HTML？

Question

Next.js在僅當某個按鈕被點擊時才顯示的頁面上預先渲染HTML嗎？例如，當我們有選項卡時，它是否會渲染尚未顯示的選項卡的內容？

Answer 1

不僅適用於Next.js，也適用於React，它將取決於您如何有條件地顯示/隱藏元件，特別是如果它被CSS或JavaScript隱藏。以下是一個範例：

// 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. 在第一個範例中，當isVisible屬性設定為false時，將呈現一個空片段。空片段不會產生任何HTML。

2. 在第二個範例中，我們只是根據屬性更改了CSS的display屬性，而在看不見的情況下，產生的HTML仍將包含在您的HTML中。