Tech with Jagmeet

Page is empty : data-next-hide-fouc issue

Published by

Jagmeet Kaur

Recently, I was working with Sitecore jss next js app. When I ran npm run start:connected

The page was coming all empty.

On further looking into it, I found that 2 following tags got added automatically:

<style data-next-hide-fouc="true">body{display:none}</style>
<noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript>

The issue Flash of Unstyled Content(FOUC) happens when styles/scripts does not load properly on the page. Fix the issues and these tags will be gone.

To know more about the causes and fixes. Check this.

“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”