Can someone explain why my header image is flickering on refresh?

Unanswered

MaKTaiL posted this in #help-forum

2023-09-09T16:14:54.000Z

Issue only happens in production in Vercel. Locally it works just fine.

https://sidebar-showcase.vercel.app/

https://github.com/MaKTaiL/sidebar

<Link href="/">
  <Image
    src={"/next.svg"}
    alt="Next Logo"
    width={0}
    height={0}
    className="h-auto w-24"
    priority
  />
</Link>

3 Replies

2023-09-09T17:36:47.000Z

it looks like the .svg file is not being cached, this is the response header:

Cache-Control: public, max-age=0, must-revalidate

for .svg logo files it is usually better to inline the SVG to avoid it flashing when loading, it is important since this element is above the fold

2023-09-09T19:27:46.000Z

How can I do that? Sorry, never used SVG files before. I just re-used the one that comes with create-next-app

2023-09-09T20:09:30.000Z

you can use the SVG code directly in the JSX with small corrections, there are tools to do it automatically: https://svg2jsx.com/