Unterstützt Next.js bedingtes Rendern und Vorrendern von nicht gerendertem HTML?

Question

Next.js rendert HTML auf einer Seite vor, die nur angezeigt wird, wenn auf eine bestimmte Schaltfläche geklickt wird? Wenn wir beispielsweise Registerkarten haben, wird dann der Inhalt der Registerkarte gerendert, der noch nicht angezeigt wird?

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