So i am rebuilding my website from React to Next. I have a client component that renders the background (I create some sort of starry background). For that I need to know the window.innerWidth. I used to do it like this:

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

Next does however not like this as window is not available initially. I can solve this by doing it like this:

const [windowWidth, setWindowWidth] = useState<number>(0);
useLayoutEffect(() => {
setWindowWidth(window.innerWidth);
}, [])

This however creates a very short delay in the loading process. Do I have any options to counter this effect?

I tried using dynamic importing the component, but that doesnt have the effect I want.