Me está pasando algo muy extraño en un sitio web de Gatsby que estoy construyendo. Siento que probablemente sea un error extraño de React que no conozco. Es tan extraño que podría tener problemas para describirlo, pero aquí va:
Quiero representar un componente de pie de página diferente en mi página de contacto para el resto de mi sitio. Los componentes son similares pero no idénticos.
Estoy usando un código como este:
{ !isContact ? // this is a useState state <Footer /> : <FooterContact /> } El error es que, a veces, cuando isContact es verdadero, el html que se representa consta de las primeras líneas del componente Footer seguido del resto de mi componente FooterContact . es decir, obtengo:
<footer> // this is from the Footer component <div class="inner"> // this is from the Footer component <h1>Contact footer</h1> // this is from the FooterContact component <p>Lorem Ipsum</p> // this is from the FooterContact component </div> </footer>Las condiciones en las que esto sucede son:
FooterContact funciona bien.¿Alguien ha experimentado algo como esto antes?
¿Alguna sugerencia de lo que puedo intentar para depurar esto? He estado probando cosas durante las últimas horas y no siento que esté más cerca de averiguar qué está pasando.
Gracias
Esto ocurre cuando hay una diferencia entre el HTML renderizado del lado del servidor y el DOM oculto inicial renderizado del lado del cliente. Esto causa problemas durante el proceso de hidratación en el que React intenta alinear la salida DOM de los renderizados de su componente con el DOM HTML en vivo.
Busque áreas de su código en las que esté representando condicionalmente en función de una expresión que dependa del entorno o del contexto de representación. Específicamente, está buscando cualquier expresión que pueda dar como resultado que se represente una rama condicional diferente durante el procesamiento inicial .
Por ejemplo, esto es un problema:
const ExampleOfProblematicCode = () => { const isClientSide = typeof window !== "undefined" return isClientSide ? <div>Hello!</div> : null } En su lugar, espere hasta que un useEffect tenga la oportunidad de ejecutarse y cambie el estado para solicitar una nueva representación antes de alterar la salida del lado del cliente:
const ExampleOfGoodPractice = () => { const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return isLoaded ? <div>Hello!</div> : null } Esto generará el mismo resultado durante el procesamiento inicial , después de lo cual React ejecutará el gancho useEffect que da como resultado que isLoaded sea true y represente la rama condicional alternativa.
Editar: solo para aclarar, este comportamiento es exactamente lo que se espera cuando hay un desajuste de hidratación:
Las condiciones en las que esto sucede son:
- Solo está sucediendo en un servidor en vivo.
- Solo sucede cuando "actualizo" la página de contacto. Si viajo allí a través de un enlace desde otra página, el componente FooterContact funciona bien.
Esto se debe a que la carga inicial es la única que contiene HTML prerenderizado. Después de eso, React se hidrata y Gatsby maneja la navegación del lado del cliente al cargar los fragmentos del paquete web y los archivos page-data.json necesarios para representar las páginas posteriores del lado del cliente.