Next.js Discord

Discord Forum

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

Unanswered
MaKTaiL posted this in #help-forum
Open in Discord
Avatar
MaKTaiLOP
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

Avatar
Rafael Almeida
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
Avatar
MaKTaiLOP
How can I do that? Sorry, never used SVG files before. I just re-used the one that comes with create-next-app
Avatar
Rafael Almeida
you can use the SVG code directly in the JSX with small corrections, there are tools to do it automatically: https://svg2jsx.com/