1

Hey guys Im on the hunt for page speed ;), and literally just the CLS (Columns Layout Shift) breaks my neck... I have a JSON file which holds all the content for my page and it gets loaded dynamically to my Components like: (easy example, in production the json is much bigger...)

import data from "./Model.json";

export default function Component (){
return <div>{data.text}</div>
}

Do you think in the first time my div is height 0 and after the content comes from the model.json the div is growing and thats the reason I got these CLS ?

Greeting and Thanks for any helps :heart:

Alx
  • 11
  • 1
  • You need to use `getStaticProps()` function. See https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation – MB_ Nov 19 '21 at 13:24
  • Hey man, thanks for your reply! Now it looks like: import data from „./model.json“ and in my getStaticProps(){return {props: data}} still habe this cls issue :/ – Alx Nov 20 '21 at 15:40
  • Did you pass `props` in your component? – MB_ Nov 21 '21 at 16:10
  • Yeah I did! Maybe I have to show my full code ;) – Alx Nov 22 '21 at 09:00
  • Yes it's better if you show your code. It will be easier to help you. If possible on https://codesandbox.io/ – MB_ Nov 22 '21 at 17:37

0 Answers0