[✨] HTTP 103 Early Hint
GrandSchtroumpf opened this issue · 0 comments
GrandSchtroumpf commented
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