Next js shows a 0 at the top for one second on load page content

in my nextjs app, when the page loads there is a 0 in the top left corner for a split second. In that page, I get some data from Sanity CMS with getStaticProps and return the content.. I notice that even if I return a empty fraction the 0 appears.

  return <>{Object?.keys(finalContent).length && <></>}</>;

If I return just the empty fraction without checking for

Object?.keys(finalContent).length && 

the 0 is gone

  return <></>;  // no 0 in the page

Anyone know how to remove it?

Answer

I assume with Object?.keys(finalContent).length you want to ensure that the data was fetched. Apparently the ‘0’ of the object keys length doesn’t count as a falsy value here, so it gets rendered as a value, just as if you would say some arbitrary value/number like 7 && <></>.

try this:

  return <>{Object?.keys(finalContent).length != 0 && <></>}</>;

It’ll ensure that the expression counts as a boolean