[NEXT-811] [appDir] `next/image` with `priority` doesn't generate `<link rel="preload" ...>` tag. #43134

kvnang · 2022-11-19T19:07:54Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
Node: 18.10.0
npm: 8.19.2
Yarn: 1.22.19
pnpm: 7.13.0
Relevant packages:
next: 13.0.5-canary.2
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using pages directory, the <Image /> component from next/image with priority prop will generate a <link rel="preload" as="image" ... /> on the <head />. But this is not the case when using app directory.

I believe this is because, currently, the <link> tag is injected using next/head on a client component (reference). This doesn't work given the server component setup.

Expected Behavior

<link rel="preload" as="image" ... /> will also be generated for priority <Image /> when using app directory.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/kvnang/next-image-preload

To Reproduce

git clone https://github.com/kvnang/next-image-preload
cd next-image-preload
npm run build && npm run start

Under /app/page.tsx, the <Image /> component with src vercel.svg has a priority prop set to true, and thus should produce <link rel="preload" /> tag. But it doesn't in this case.

_NEXT-811

The text was updated successfully, but these errors were encountered:

kvnang · 2022-11-20T01:36:06Z

Possible solutions I have been exploring:

Using ReactDOM's float preload() (like in <Script /> component), but it doesn't support certain attributes like imgsrcset, for example.
Making a server component version of <Image /> component, and just inlining <link> tag, which will be picked up by the <head>. But this seems quite destructive ...

transitive-bullshit · 2022-11-21T06:16:25Z

I'm seeing this as well, though I'm also seeing this with the new next/image when reverting to use pages/.

balazsorban44 · 2022-11-21T12:30:38Z

Thanks, this is currently expected, as head handling is still a work in progress: https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features, which next/image relies on to push a preload tag to the DOM.

next.js/packages/next/client/image.tsx

Lines 893 to 899 in 21d7d22

    
           {priority ? ( 
        
             // Note how we omit the `href` attribute, as it would only be relevant 
        
             // for browsers that do not support `imagesrcset`, and in those cases 
        
             // it would likely cause the incorrect image to be preloaded. 
        
             // 
        
             // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset 
        
             <Head>

@transitive-bullshit, I could not reproduce it with pages/, are you sure you are using priority? If so, could you link to a reproduction, as that might actually be considered a bug.

sckimynwa · 2022-12-26T09:31:15Z

Same Issue Here.
I'm using vercels official next 13 demo which uses next 13.0.7-canary.4 as a dependency

in this demo, I created new page and add Client Component to Use next/image

import Test from './child.client';

export default async function Page() {
  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <h1 className="text-xl font-medium text-gray-400/80">
          Next Image Test
        </h1>
        <Test />
      </div>
    </div>
  );
}

// child.client.tsx
import Image from 'next/image';

const Test = () => {
  return (
    <div className="space-y-2">
      <div className="flex space-x-2">
        <Image
          src="/prince-akachi-LWkFHEGpleE-unsplash.jpg"
          className="rounded-full"
          width={300}
          height={300}
          alt="User"
        />
        <Image
          priority
          src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg"
          className="rounded-full"
          width={300}
          height={300}
          alt="User"
        />
      </div>
    </div>
  );
};

export default Test;

in the second image, with priority props, next should generate link tag with preload as image, but nothing happend in the document's head tag. I think injecting the preload tag is not working in thie version 🤔

michaelyang · 2023-01-16T21:23:35Z

Same issue here, not seeing the preload being generated. The priority prop seems to be only be removing the lazy loading portion, even though the doc says it should also preload the image.

steve-marmalade · 2023-02-23T20:16:43Z

@balazsorban44 , regarding:

Thanks, this is currently expected, as head handling is still a work in progress: https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features, which next/image relies on to push a preload tag to the DOM.

Has anything changed in this regard with all of the effort around head.js / metadata that went into 13.2 ?

steve-marmalade · 2023-04-14T04:52:03Z

The latest Beta docs now include a section on Resource hints, and it looks like support for next/image should be added automatically for client components:

These methods are currently only supported in Client components.
Next.js in-built features such as next/font, next/image and next/script automatically handle relevant resource hints.

However, when I updated to 13.3 I am not seeing these tags in the <head> of the document.

Should I create a separate repro for this? Or should we be setting these manually as shown in e.g. this comment?

styfle · 2023-04-14T13:30:55Z

This issue is that browsers like Safari that don't support imagesrcset will fallback to href.

next.js/packages/next/src/client/image.tsx

Lines 959 to 963 in af49d50

    
           // Note how we omit the `href` attribute, as it would only be relevant 
        
           // for browsers that do not support `imagesrcset`, and in those cases 
        
           // it would likely cause the incorrect image to be preloaded. 
        
           // 
        
           // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset

The new ReactDOM.preload() requires a href and that could cause Safari to be slower by preloading the wrong image, so we need a better solution.

We'll likely need to fix this in React upstream first.

leo-cheron · 2023-05-10T17:34:11Z

App dir is now Stable but this issues remains on next 13.4.1. It drastically cripples LCP performances :(

ghost · 2023-05-12T09:17:50Z

Also an issue here, lcp image has fetchpriority but no preload tag is generated.

Jarpiino · 2023-06-15T16:05:21Z

still apparent in 13.4.5 :(

markomitranic · 2023-06-21T10:08:50Z

This issue is that browsers like Safari that don't support imagesrcset will fallback to href.

next.js/packages/next/src/client/image.tsx

Lines 959 to 963 in af49d50

// Note how we omit the `href` attribute, as it would only be relevant

// for browsers that do not support `imagesrcset`, and in those cases

// it would likely cause the incorrect image to be preloaded.

//

// https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset

The new ReactDOM.preload() requires a href and that could cause Safari to be slower by preloading the wrong image, so we need a better solution.

We'll likely need to fix this in React upstream first.

Would be nice to just simply not support srcsets until its fixed - instead of omitting the whole feature. But thats not a next feature, its a react one...

Until then, i live with the errors, and use:

    ReactDOM.preload(url, { as: "image" as "script" });

gauravsaini964 · 2023-07-13T12:37:06Z

Any ETA on when this fix is landing in canary? I see huge drop in LCP performance ~1 second.

Jarpiino · 2023-07-13T14:53:02Z

Have you tried to statically import your images?
import sample_image from "public/images/sample_image.jpg"
And then applying the priority=true?

jep-a · 2023-07-13T17:15:26Z

Looks like if you need it now, you can update to 13.4.9 and use getImgProps from #51205 and use that to get the generated srcset and sizes from your image and feed it into ReactDOM.preload

Just wrote this without testing, but this is a simplified version of what I did in real code

import Image, { unstable_getImgProps as getImgProps } from 'next/image';
import { preload } from 'react-dom';

const ImagePreload = ({imgProps}) => {
  const preloadImgProps = getImgProps(imgProps);
  
  preload(preloadImgProps.props.src, {
    as: 'image',
    imageSrcSet: preloadImgProps.props.srcSet,
    imageSizes: imgProps.sizes
  });
  
  return (
    <Image {...imgProps} />
  );
};

But looks like its almost fixed anyways with this PR #52425

- Depends on facebook/react#27096 - Fixes #43134 - Closes NEXT-811 - Closes NEXT-846

gauravsaini964 · 2023-07-21T11:36:16Z

Please check #52995 .

github-actions · 2023-08-16T00:05:01Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

kvnang added the bug Issue was opened via the bug report template. label Nov 19, 2022

balazsorban44 added area: app App directory (appDir: true) Image (next/image) Related to Next.js Image Optimization. Metadata Related to Next.js' Metadata API. labels Nov 21, 2022

balazsorban44 removed the bug Issue was opened via the bug report template. label Nov 21, 2022

11koukou mentioned this issue Dec 5, 2022

Add meta viewport tag to app directory automatically #43711

Closed

1 task

dan2kx mentioned this issue Jan 4, 2023

Image was preloaded using link #44556

Open

1 task

igoychev mentioned this issue Feb 15, 2023

Created Partners page podkrepi-bg/frontend#1340

Merged

AdisonCavani mentioned this issue Feb 23, 2023

Current bug tracker AdisonCavani/k1ng.dev#71

Closed

styfle added the kind: bug label Mar 10, 2023

styfle changed the title ~~[appDir] next/image with priority doesn't generate <link rel="preload" ...> tag.~~ [NEXT-811] [appDir] next/image with priority doesn't generate <link rel="preload" ...> tag. Mar 10, 2023

styfle self-assigned this Mar 10, 2023

styfle mentioned this issue Jun 13, 2023

Next/Image priority doesn't add prefetch head tag #50694

Closed

1 task

markomitranic mentioned this issue Jun 21, 2023

Support for priority / preload coreyward/sanity-image#31

Closed

styfle mentioned this issue Jul 8, 2023

fix: add missing <preload> for next/image in App Router #52425

Merged

kodiakhq bot closed this as completed in #52425 Jul 14, 2023

kodiakhq bot pushed a commit that referenced this issue Jul 14, 2023

fix: add missing <preload> for next/image in App Router (#52425)

c3ca17c

- Depends on facebook/react#27096 - Fixes #43134 - Closes NEXT-811 - Closes NEXT-846

github-actions bot added the locked label Aug 16, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NEXT-811] [appDir] `next/image` with `priority` doesn't generate `<link rel="preload" ...>` tag. #43134

[NEXT-811] [appDir] `next/image` with `priority` doesn't generate `<link rel="preload" ...>` tag. #43134

kvnang commented Nov 19, 2022 •

edited by styfle

Loading

kvnang commented Nov 20, 2022 •

edited

Loading

transitive-bullshit commented Nov 21, 2022

balazsorban44 commented Nov 21, 2022

sckimynwa commented Dec 26, 2022 •

edited

Loading

michaelyang commented Jan 16, 2023 •

edited

Loading

steve-marmalade commented Feb 23, 2023

steve-marmalade commented Apr 14, 2023

styfle commented Apr 14, 2023 •

edited

Loading

leo-cheron commented May 10, 2023

ghost commented May 12, 2023

Jarpiino commented Jun 15, 2023

markomitranic commented Jun 21, 2023 •

edited

Loading

gauravsaini964 commented Jul 13, 2023

Jarpiino commented Jul 13, 2023

jep-a commented Jul 13, 2023 •

edited

Loading

gauravsaini964 commented Jul 21, 2023

github-actions bot commented Aug 16, 2023

[NEXT-811] [appDir] next/image with priority doesn't generate <link rel="preload" ...> tag. #43134

[NEXT-811] [appDir] next/image with priority doesn't generate <link rel="preload" ...> tag. #43134

Comments

kvnang commented Nov 19, 2022 • edited by styfle Loading

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

To Reproduce

kvnang commented Nov 20, 2022 • edited Loading

transitive-bullshit commented Nov 21, 2022

balazsorban44 commented Nov 21, 2022

sckimynwa commented Dec 26, 2022 • edited Loading

michaelyang commented Jan 16, 2023 • edited Loading

steve-marmalade commented Feb 23, 2023

steve-marmalade commented Apr 14, 2023

styfle commented Apr 14, 2023 • edited Loading

leo-cheron commented May 10, 2023

ghost commented May 12, 2023

Jarpiino commented Jun 15, 2023

markomitranic commented Jun 21, 2023 • edited Loading

gauravsaini964 commented Jul 13, 2023

Jarpiino commented Jul 13, 2023

jep-a commented Jul 13, 2023 • edited Loading

gauravsaini964 commented Jul 21, 2023

github-actions bot commented Aug 16, 2023

[NEXT-811] [appDir] `next/image` with `priority` doesn't generate `<link rel="preload" ...>` tag. #43134

[NEXT-811] [appDir] `next/image` with `priority` doesn't generate `<link rel="preload" ...>` tag. #43134

kvnang commented Nov 19, 2022 •

edited by styfle

Loading

kvnang commented Nov 20, 2022 •

edited

Loading

sckimynwa commented Dec 26, 2022 •

edited

Loading

michaelyang commented Jan 16, 2023 •

edited

Loading

styfle commented Apr 14, 2023 •

edited

Loading

markomitranic commented Jun 21, 2023 •

edited

Loading

jep-a commented Jul 13, 2023 •

edited

Loading