Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[✨] HTTP 103 Early Hint #40

Closed
GrandSchtroumpf opened this issue Apr 22, 2024 · 1 comment
Closed

[✨] HTTP 103 Early Hint #40

GrandSchtroumpf opened this issue Apr 22, 2024 · 1 comment
Labels
[STAGE-2] incomplete implementation Remove this label when implementation is complete [STAGE-2] not fully covered by tests yet Remove this label when tests are verified to cover the implementation [STAGE-2] unresolved discussions left Remove this label when all critical discussions are resolved on the issue [STAGE-3] docs changes not added yet Remove this label when the necessary documentation for the feature / change is added [STAGE-3] missing 2 reviews for RFC PRs Remove this label when at least 2 core team members reviewed and approved the RFC implementation

Comments

@GrandSchtroumpf
Copy link

GrandSchtroumpf commented Apr 22, 2024

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

@gioboa
Copy link
Member

gioboa commented Oct 14, 2024

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.

@gioboa gioboa transferred this issue from QwikDev/qwik Oct 14, 2024
@github-project-automation github-project-automation bot moved this to In Progress (STAGE 2) in Qwik Evolution Oct 14, 2024
@github-actions github-actions bot added [STAGE-2] incomplete implementation Remove this label when implementation is complete [STAGE-2] not fully covered by tests yet Remove this label when tests are verified to cover the implementation [STAGE-2] unresolved discussions left Remove this label when all critical discussions are resolved on the issue [STAGE-3] docs changes not added yet Remove this label when the necessary documentation for the feature / change is added [STAGE-3] missing 2 reviews for RFC PRs Remove this label when at least 2 core team members reviewed and approved the RFC implementation labels Oct 14, 2024
@QwikDev QwikDev locked and limited conversation to collaborators Oct 14, 2024
@gioboa gioboa converted this issue into discussion #117 Oct 14, 2024
@github-project-automation github-project-automation bot moved this from In Progress (STAGE 2) to Released as Stable (STAGE 5) in Qwik Evolution Oct 14, 2024
@shairez shairez removed this from Qwik Evolution Oct 15, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
[STAGE-2] incomplete implementation Remove this label when implementation is complete [STAGE-2] not fully covered by tests yet Remove this label when tests are verified to cover the implementation [STAGE-2] unresolved discussions left Remove this label when all critical discussions are resolved on the issue [STAGE-3] docs changes not added yet Remove this label when the necessary documentation for the feature / change is added [STAGE-3] missing 2 reviews for RFC PRs Remove this label when at least 2 core team members reviewed and approved the RFC implementation
Projects
None yet
Development

No branches or pull requests

2 participants