taduuu
commented
3 years ago i have the same problem bro, anyone have a solution?
Open nitroo88 opened 3 years ago
taduuu
commented
3 years ago i have the same problem bro, anyone have a solution?
mohamedGamalAbuGalala
commented
3 years ago I have the same problem.
kmsomebody
commented
3 years ago Adding <script>0</script> as the first child of the <body> in _document.js fixed it for me.
mohamedGamalAbuGalala
commented
3 years ago @DarthSomebody Didn't solve my problem.
taduuu
commented
3 years ago it`s not next bug, it is chrome bug, try disable transitions on start, like ex:
{typeof window === 'undefined' && ( )}
barakplasma
commented
3 years ago In our project, we added styled-jsx to our package.json, and there was another version required by Next 10.0.7 itself. When we removed the duplicate styled-jsx, this resolved the FOUC for us.
willwill96
commented
2 years ago Having this issue using the with-tailwindcss example out of the box as well. Curious and hopeful if you've found a solution to this yet.
I've found a handful of other issues that seem related, however most get closed and locked down without any real resolution.
It seems like if you want inline styles as part of the SSR response, you need to use a UI library that provides it's own utilities (like MUI) or a css-in-js solution :disappointed:
cvle
commented
2 years ago Try putting this workaround in your _app.tsx
/**
* Fix for Chrome: Turns off transitions during load to prevent
* transition animations from unstyled content to styled content.
* See: https://github.com/vercel/next.js/issues/25487
*/
const ChromeFixUnstyledTransitions = () => {
const [allowTransitions, setAllowTransitions] = useState(false);
// Run this once during render.
useMemo(() => {
if (typeof window !== "undefined") {
window.addEventListener("load", function () {
setAllowTransitions(true);
});
}
}, []);
if (allowTransitions) {
return null;
}
return (
<style
dangerouslySetInnerHTML={{
__html: ` *, *::before, *::after { transition: none!important; } `,
}}
/>
);
};
Nazzanuk
commented
2 years ago Try putting this workaround in your
_app.tsx/** * Fix for Chrome: Turns off transitions during load to prevent * transition animations from unstyled content to styled content. * See: https://github.com/vercel/next.js/issues/25487 */ const ChromeFixUnstyledTransitions = () => { const [allowTransitions, setAllowTransitions] = useState(false); // Run this once during render. useMemo(() => { if (typeof window !== "undefined") { window.addEventListener("load", function () { setAllowTransitions(true); }); } }, []); if (allowTransitions) { return null; } return ( <style dangerouslySetInnerHTML={{ __html: ` *, *::before, *::after { transition: none!important; } `, }} /> ); };
Thanks this fixed my issue! FOUC with css modules
I used a slightly modified version of this:
const ChromeFixUnstyledTransitions = memo(() => {
const [allowTransitions, setAllowTransitions] = useState(false);
useEffect(() => {
setAllowTransitions(true);
}, []);
console.log({ allowTransitions });
if (allowTransitions) return null;
return (
<style
dangerouslySetInnerHTML={{
__html: ` *, *::before, *::after { transition: none!important; } `,
}}
/>
);
});
ImraKocis
commented
1 year ago I had issues with FOUC on initial load and page reload. My app is SSG nextJS 13 and react 18, styled with tailwind css.
Solutions that works for me and i hope it will help someone also is this Code from _app.tsx
const [isLoading, setIsLoading] = useState<boolean>(true);
useEffect(() => {
if (typeof window !== "undefined") setIsLoading(false);
}, []);
useEffect(() => {
router.events.on("routeChangeStart", () => {
setIsLoading(true);
});
router.events.on("routeChangeComplete", () => {
setIsLoading(false);
});
router.events.on("routeChangeError", () => {
setIsLoading(false);
});
}, [router.events]);Solution was checking if window is undefined inside of useEffect, along side with nextJS router events for handling page change.
willwill96
commented
1 year ago In my case, I realized there was not actually a FOUC issue, I was just expecting the styles to be inlined like with MUI or other css in js frameworks. There is an experimental option to enable inline styles mentioned here: https://twitter.com/hdjirdeh/status/1369709676271726599
In order to use it add this to your next.config:
experimental: {
optimizeCss: true
}Then install critters as a package.
In my case, I decided against keeping it in my app, but maybe this is helpful for someone else.
joebentaylor1995
commented
8 months ago I had this issue with styled-components, not sure if this helps at all, but I fixed this by creating a StyledComponentsRegistry component and wrapping this around my components in the layout.jsx file; directly underneath the body tag.
In the registry file this is my code:
'use client';
// Imports
// ------------
import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
// Exports
// ------------
export default function StyledComponentsRegistry({ children }) {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement();
styledComponentsStyleSheet.instance.clearTag();
return <>{styles}</>;
});
if (typeof window !== 'undefined') return <>{children}</>;
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
);
}
What version of Next.js are you using?
10.2.3
What version of Node.js are you using?
14.16.0
What browser are you using?
Chrome
What operating system are you using?
Windows
How are you deploying your application?
next start
Describe the Bug
After creating a web app with SSR and run on the server, there is a problem with FUOC (Flash Of Unused Content). We're using CSS modules for every React Component (written in SCSS). At the beginning of loading the whole page there's no CSS styles. How can we fix it? To create our own stylesheet from all sass files and put into the head is could be a workaround, but with this modules make no sense.
Expected Behavior
Maybe is there an option to fix it from server side or something else?
To Reproduce