Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add Link HTTP headers #5455

Closed
isaac-mcfadyen opened this issue Jul 10, 2022 · 5 comments · Fixed by #5735
Closed

Add Link HTTP headers #5455

isaac-mcfadyen opened this issue Jul 10, 2022 · 5 comments · Fixed by #5735
Labels
feature / enhancement New feature or request p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc.
Milestone
non-urgent

Comments

@isaac-mcfadyen
Copy link
Contributor

isaac-mcfadyen commented Jul 10, 2022 •
edited
Loading

Describe the problem

With Chrome's stable version v103 now integrating RFC 8297 Early Hints, web hosts have started to take note.

Among them is Cloudflare, who supports Automatic Early Hints without making any changes to code (aside from returning a header). It works like this:

  • on first request, client returns regular response with a Link header indicating resources the current page depends on. Cloudflare stores this in a non-expiring cache
  • on subsequent requests, they transform the Link header into a 103 Early Hints response, serving it as soon as they can (before the real response)
  • when the actual response comes through (from an origin server or Worker) they compare the Link header. If things have changed, they update the cache

SvelteKit relies on lots of small JS files, so allowing these to be returned in the Link header (and benefit from 103 Early Hints on Cloudflare) would likely allow a large speed improvement, especially if the webserver or Worker/Pages Function takes a while to return the response (database lookups etc).

Although relatively new, Early Hints look very promising. Some articles:

Describe the proposed solution

In order for Cloudflare's Automatic Early Hints to work properly, the resources the current page depends on must be returned in a Link header with the regular response.

This is currently impossible with SvelteKit because there is no way to access the manifest. Were there a way to access the manifest (containing which JS files are needed for each route), this could be done inside a hook or similar. E.g:

// DOES NOT WORK, PROOF OF CONCEPT
export async function handle({ event, resolve, manifest }) {
  const response = await resolve(event);

  for(const jsFile of manifest[event.url.pathname])
  {
    response.headers.append("Link", `<${jsFile.url}>; rel=preload; as=script`)
  }

  return response;
}

Alternatives considered

One alternative could be doing this automatically (without user integration). This is actually a good idea except that:

  • some platforms don't care about the Link header so this would be extra work by the server
  • some users might not want to prefetch certain files for one reason or another

Perhaps a flag in the config might work?

Another alternative would be to make this adapter-specific (i.e. implemented in adapter-cloudflare and when adapter-auto detects it is running on Cloudflare).

Importance

nice to have

Additional Information

No response
@isaac-mcfadyen isaac-mcfadyen changed the title Support Cloudflare's HTTP 103 Early Hints Support Cloudflare's Automatic HTTP 103 Early Hints Jul 10, 2022
@Rich-Harris
Copy link
Member

I think this should happen automatically at the framework level. We're already generating <link> elements and putting them in the <head>, this is just an alternative way of doing that. We should probably only inject the <link> elements when generating prerendered HTML.

If someone really wants to not prefetch files, they can manipulate the header in handle.

@Rich-Harris Rich-Harris modified the milestone: 1.0 Jul 11, 2022
@Rich-Harris Rich-Harris added feature / enhancement New feature or request labels Jul 11, 2022
@jbergstroem
Copy link

Perhaps the headers file could be generated / handle this? https://developers.cloudflare.com/pages/platform/headers/

@isaac-mcfadyen
Copy link
Contributor Author

headers file could be generated / handle this?

Unfortunately _headers don't work with the _worker.js that SvelteKit uses. 🙂

Even if it did that would lock it to a single provider: I imagine over the coming years other providers will also do some sort of Early Hint implementations.

@jbergstroem
Copy link

Unfortunately _headers don't work with the _worker.js that SvelteKit uses.

Ah, its in the orange quote at the top: https://developers.cloudflare.com/pages/platform/headers/

Even if it did that would lock it to a single provider

I suppose adapters would implement it different ways based on what functionality the platform supports?

@benmccann benmccann added the p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc. label Jul 19, 2022
@Rich-Harris Rich-Harris modified the milestones: 1.0, whenever Jul 20, 2022
@benmccann
Copy link
Member

benmccann commented Jul 27, 2022 •
edited
Loading

There was an implementation of this in #4785. I think we'd probably have merged it with a bit more work, but the submitter closed the PR. Anyway, there's a lot of valuable discussion there

@benmccann benmccann changed the title Support Cloudflare's Automatic HTTP 103 Early Hints Add Link HTTP headers Jul 27, 2022
@benmccann benmccann mentioned this issue Jul 27, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature / enhancement New feature or request p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc.
Projects
None yet
Milestone
non-urgent
Development

Successfully merging a pull request may close this issue.

[feat] implement Link header benmccann/kit
4 participants
@jbergstroem @benmccann @Rich-Harris @isaac-mcfadyen