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中。