Next.js Image Component Causing FOUC with Dynamic Image Sources in SSR
I've searched everywhere and can't find a clear answer. I need help solving I just started working with I'm working on a project and hit a roadblock..... I've been banging my head against this for hours. I'm experiencing a Flash of Unstyled Content (FOUC) when using the Next.js Image component with dynamic image sources in Server-Side Rendering (SSR). The images are fetched from an external API, and while they load correctly in development mode, they flash a blank space on the initial render in production. I've confirmed that the image URLs are valid. Here’s how I'm implementing the Image component: ```jsx import Image from 'next/image'; import { useEffect, useState } from 'react'; const MyComponent = () => { const [imageUrl, setImageUrl] = useState(''); useEffect(() => { const fetchImage = async () => { const response = await fetch('https://api.example.com/get-image'); const data = await response.json(); setImageUrl(data.url); }; fetchImage(); }, []); return ( <div> {imageUrl && <Image src={imageUrl} alt='Dynamic Image' width={500} height={300} />} </div> ); }; export default MyComponent; ``` In my `next.config.js`, I've added the domain of the API to `images.domains`: ```javascript module.exports = { images: { domains: ['api.example.com'], }, }; ``` The issue seems to occur because Next.js doesn't have the image URL at build time, resulting in a moment where no image is displayed. I’ve tried wrapping the `Image` component in a conditional to check if `imageUrl` is set, but the FOUC still occurs while the image is being fetched. Has anyone encountered this issue, and how can I avoid the FOUC in this scenario? Thanks! My development environment is macOS. Thanks in advance! For context: I'm using Javascript on Ubuntu. What are your experiences with this? Is there a better approach? I'm working on a REST API that needs to handle this. Any help would be greatly appreciated!