I'm using NextJs for my app and I'm having a FOUC on production. I'm not using styled components, just moduled and global CSS/SCSS. I assume the problem may be from my _document.js file
import React from 'react';
import Document, {Html, Head, Main, NextScript} from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {...initialProps};
}
render() {
return (
<Html><Head><link href="/static/scss/vendor/antd.css" rel="stylesheet" /><link href="/static/scss/vendor/bootstrap.min.css" rel="stylesheet" /><link href="/static/scss/base/typography.css" rel="stylesheet" /><link href="/static/scss/base/ionicons.min.css" rel="stylesheet" /><link href="/static/scss/base/flaticons.css" rel="stylesheet" /><link href="/static/scss/base/reset.css" rel="stylesheet" /></Head><body><div id="fb-root" /><Main /><NextScript /></body></Html>
);
}
}
export default MyDocument;
One possible solution to eliminate the FOUC (flash of unstyled content) is to wrap the components that are causing the FOUC in a <div> element with a class that has a visibility: hidden style. Then, you can add a window.addEventListener('load', () => {...}) block that removes the visibility: hidden style from the <div> element once the page has finished loading.
For example:
import React from 'react'; import Document, {Html, Head, Main, NextScript} from 'next/document'; class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return {...initialProps}; } componentDidMount() { // Remove the visibility: hidden style from the wrapper div once the page has finished loadingwindow.addEventListener('load', () => { const wrapper = document.getElementById('wrapper'); if (wrapper) { wrapper.style.visibility = ''; } }); } render() { return ( <Html> <Head><link href="/static/scss/vendor/antd.css" rel="stylesheet" /><link href="/static/scss/vendor/bootstrap.min.css" rel="stylesheet" /><link href="/static/scss/base/typography.css" rel="stylesheet" /><link href="/static/scss/base/ionicons.min.css" rel="stylesheet" /><link href="/static/scss/base/flaticons.css" rel="stylesheet" /><link href="/static/scss/base/reset.css" rel="stylesheet" /></Head><body><div id="fb-root" /> {/* Wrap the components that are causing the FOUC in a div with visibility: hidden style */} <div id="wrapper" style={{visibility: 'hidden'}}><Main /><NextScript /></div></body> </