Next.js prend-il en charge le rendu conditionnel et le pré-rendu du HTML non rendu ?

Question

Next.js pré-rend le HTML sur une page qui ne s'affiche que lorsque l'on clique sur un certain bouton ? Par exemple, lorsque nous avons des onglets, est-ce que le contenu de l'onglet n'est pas encore affiché ?

Answer 1

Non seulement pour Next.js mais aussi pour React, cela dépendra de la façon dont vous affichez/masquez le composant de manière conditionnelle, surtout s'il est masqué par CSS ou JavaScript. Voici un exemple :

// 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. Dans le premier exemple, lorsque isVisible属性设置为false un fragment vide sera rendu. Un fragment vide ne produira aucun code HTML.

2. Dans le deuxième exemple, nous avons juste modifié la propriété display du CSS en fonction de l'attribut, et le HTML généré sera toujours inclus dans votre HTML sans être visible.