QwikDev/qwik

[✨] HTTP 103 Early Hint

GrandSchtroumpf opened this issue · 0 comments

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