Skip to content

[✨] HTTP 103 Early Hint #40

Closed
Closed
@GrandSchtroumpf

Description

@GrandSchtroumpf

Is your feature request related to a problem?

This is currently not possible to set an HTTP 103 Early Hint response for preloading assets, the browser have to parse the html first.
MDN: Doc: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103

Describe the solution you'd like

Ideally Qwik would check for prelaod and preconnect in the DocumentMeta. If there are one, send a HTTP 103 Early Hint to the client so it can preload the request without having to wait for the document.

Example :

export component$(() => {
  return <>
    <header>
      <img src="/large-img.webp" loading="eager" />
    </header>
    <main>
      <img src="https://external-link" loading="lazy" />
    </main>
  </>
})
export const head: DocumentHead = () => {
  return {
    links: [
      // Generates a <link> & HTTP 103 Early Hint preload
      {
        rel: 'preload',
        href: '/large-img.webp',
        as: 'image'
      },
      // Generates a <link> & HTTP 103 Early Hint preconnect
      {
        rel: 'preconnect',
        href: 'https://external-link',
        as: 'image'
      },
    ],
  };
};

Describe alternatives you've considered

Provide a way to add additional HTTP Responses of the page :

export component$(() => {
  return <>
    <header>
      <img src="/large-img.webp" loading="eager" />
    </header>
    <main>
      <img src="https://external-link" loading="lazy" />
    </main>
  </>
});

// Additional HTTP Response
export const HttpResponse = () => {
  103: {
    headers: {
      Link: '</large-img.webp>; rel=preload, <https://external-link>; rel=preconnect'
    },
  }
}

export const head: DocumentHead = () => {
  return {
    links: [
      // Generates a <link> & HTTP 103 Early Hint preload
      {
        rel: 'preload',
        href: '/large-img.webp',
        as: 'image'
      },
      // Generates a <link> & HTTP 103 Early Hint preconnect
      {
        rel: 'preconnect',
        href: 'https://external-link',
        as: 'image'
      },
    ],
  };
};

The main issue with this approach is "how to order the responses ?" 103 should be sent as fast as possible (before the document is resolved)

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions