¿Cómo depurarías un problema de hydration mismatch en Nuxt o SSR Vue?

Respuesta

• Busca primero diferencias no deterministas entre servidor y cliente: fechas, Math.random(), ancho de ventana, timezone o datos no serializados igual.
• Mueve código dependiente del navegador a onMounted, ClientOnly o una rama explícitamente cliente si el HTML inicial no puede coincidir.
• Comprueba que Nuxt reutiliza el payload esperado y que no hay un segundo fetch que reescribe el estado justo al hidratar.

Puntos clave

• Para depurar bien en Vue conviene reducir el problema a una sola causa probable antes de tocar varias piezas a la vez.
• Los bugs más persistentes suelen mezclar asincronía, conservación de componentes y escrituras tardías sobre la misma fuente de verdad.
• Después de arreglar el síntoma hay que dejar una prevención: cleanup explícito, test, log de control o simplificación del flujo.

Errores comunes

• Cambiar varias capas a la vez puede esconder la causa real y hacer que el bug reaparezca con otra forma.
• Sin cleanup, cancelación o control de activación, los mismos problemas suelen volver tras unos cuantos cambios más.

Ejemplo de código

<template>
  <ClientOnly>
    <ChartPanel />
  </ClientOnly>
</template>

Ejemplo o caso real

En producción suele emerger tras varias iteraciones, cuando una pantalla ha ido acumulando watchers, fetches, navegación y componentes conservados en caché.

Idea clave

Depurar bien consiste en recortar el problema hasta que solo quede una causa creíble.