ResourceHints `Link` header in `HTTP 200`
Nobody has claimed this yet.
- 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
- Read the contribution guide.
- Check existing discussions and issues.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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