nuxt / nuxt/nuxt

ResourceHints `Link` header in `HTTP 200`

Open
#30,758 12 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion
Dominant language
TypeScript
Stars
60.9k
Forks
5.8k
Avg merge
7h 8m
Merged PRs (30d)
162

Description

Describe the feature

Adds a Link header from the renderer to give the browser hints in the HTTP 200 response of additional resources while downloading / parsing the server response payload. The intention is to decrease page load time by allowing the browser to simultaneously request upcoming resources needed by the DOM before they are identified.

If the browser or any proxies don't support HTTP 103 Early Hints, then including hints in the later HTTP 200 still provides early notice. Implementing the feature should hopefully be of minimal operating disruption compared to adopting HTTP 103 while providing some of the benefits.

Anecdotal evidence suggests that unloaded CSS files are blocking the client side loading of pages until fetched as a subsequent resource in Lighthouse testing. Hints may reduce page load time by reducing the gap between the resource identified and render awaiting resource including JS and CSS.

Feedback and suggestions are welcome!


Example of how it could initially work:

https://github.com/nuxt/nuxt/compare/main...IO-Fire:nuxt:feature/write-link-header
Although this implementation appears to only show JS and not styles (test sample size of 1). This may also impact the current 103 early hints feature.

SSG Support

Update the route rules' headers for each page before the creating completing the route rendering.
OR
May require changes in the Nitro static presets to encompass the headers being identified at render time rather than at route creation.

Header rule limits

Some hosting providers including Cloudflare Pages have limits on headers.

Cloudflare Pages limits the total number of "header rules" similar to route rules.

100 pages / routes with headers would use 100 headers rules. This may limit the number of pages within a site without workarounds such as https://github.com/nuxt-modules/security/issues/504#issuecomment-2562018536

Module Implementation

Module implementation may not be possible as access to the render's data may not be exposed to a module.

Additional information
  • Would you be willing to help implement this feature?
  • Could this feature be implemented as a module?
Final checks

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names the renderer, route rules, Nitro static presets, and existing HTTP 103 handling; begin by tracing how response headers are produced for SSR and SSG. Compare the proposed HTTP 200 Link behavior with Early Hints, including JS and CSS resources and hosting header limits. Done means the supported rendering paths and module limitations are documented and the behavior is covered by appropriate tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
api, backend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.