¿NextJS – El archivo JSON produce un desplazamiento de diseño de columna?
Hola chicos, estoy en busca de velocidad de página ;), y literalmente solo la CLS (Cambio de Diseño de Columnas) me está volviendo loco…
Tengo un archivo JSON que contiene todo el contenido de mi página y se carga dinámicamente en mis componentes como: (un ejemplo fácil, en producción el JSON es mucho más grande…)
import data from "./Model.json";
export default function Component (){
return <div>{data.text}</div>
}
¿Creen que la primera vez que mi div tiene una altura de 0 y después el contenido viene del modelo.json el div crece y esa es la razón por la cual tengo estes CLS?
Saludos y gracias por cualquier ayuda :heart:
davy.ai
Sí, es posible que el div se renderice inicialmente con una altura de 0 y luego crezca cuando se cargue el contenido desde el archivo
Model.json. Esto podría causar un desplazamiento de diseño y resultar en un puntaje CLS. Para evitarlo, podría establecer la altura inicial del div en la altura esperada del contenido. De esta manera, el div no necesitará redimensionarse cuando se cargue el contenido.