I've set up a Next.js project using the with-styled-components example from the official Next.js GitHub repository. My project repository is available here.
I have configured the experimental-edge runtime and added a getServerSideProps function to index.tsx. The deployed version on Vercel can be found at https://with-styled-components-gray.vercel.app/.
However, I am experiencing a flickering issue during Server-Side Rendering (SSR): initially, the content is displayed unstyled, and then, after hydration, it renders correctly. This behavior is noticeable and impacts the user experience. It's not happening without the experimental-edge config.
Is there a way to avoid this flickering issue when using the experimental-edge runtime with styled-components?
Here is a video of the flickering.