Early Hints #36089
Replies: 17 comments 8 replies
-
No browsers currently support Early hints (afaik Chrome only did as an experiment during versions 94 - 98) and you'd probably use either server streaming or early hints. |
Beta Was this translation helpful? Give feedback.
-
Early Hints was shipped with Chrome 103. https://blog.cloudflare.com/early-hints-performance/ Maybe is time to review this |
Beta Was this translation helpful? Give feedback.
-
As a workaround, if you have a Cloudflare Worker in front of your site, you could parse the response and add the header. I made a simple example of that: https://gist.github.com/pierophp/b790ae748bb8e810abca4336424ae651 It added the header correctly, but it seems Cloudflare is not giving the early hints. I still don't know why. I found these threads: https://community.cloudflare.com/t/early-hints-need-more-data-before-switching-over/342888 |
Beta Was this translation helpful? Give feedback.
-
This is a must-have, no question about it. |
Beta Was this translation helpful? Give feedback.
-
Cool! Yeah, native support would be great.
…On Sat, 15 Oct 2022, 13:20 Petr Glaser, ***@***.***> wrote:
Now with Node.js 18.11 we can do it with with custom server. Native
support would be great tho! :)
—
Reply to this email directly, view it on GitHub
<#36089 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABBMXMWBVPINKHKZ27BJ2MLWDKANJANCNFSM54A34I2A>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
Isn't the new approach of separating the head tags in their own files (https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head) a first step towards this? Because Next.js can evaluate this file without having to evaluate the actual page |
Beta Was this translation helpful? Give feedback.
-
waiting for this to release |
Beta Was this translation helpful? Give feedback.
-
the feature is well supported in most browser already, any update to support it? https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103 |
Beta Was this translation helpful? Give feedback.
-
This should be a issue...... |
Beta Was this translation helpful? Give feedback.
-
I attempted to add this feature in a custom server with Next.js. However, the only issue is that after using res.flushHeaders or res.write('') to send the response headers, Next.js does not send any further response. |
Beta Was this translation helpful? Give feedback.
-
Really need control of how CSS and JS are injected to automate early hints generation on Cloudflare, as noted above, and here: https://developers.cloudflare.com/pages/configuration/early-hints/ |
Beta Was this translation helpful? Give feedback.
-
nuxtjs support it😅😅😅 |
Beta Was this translation helpful? Give feedback.
-
well. There is a way to access this purpose, but you need to enable app dir. you can refer to this |
Beta Was this translation helpful? Give feedback.
-
Could NextJS middleware somehow be used to send the Early Hints response header? |
Beta Was this translation helpful? Give feedback.
-
If you may be interested I have opened an issues to bring this functionality into Nextjs 15: #71722 |
Beta Was this translation helpful? Give feedback.
-
I agree now it seems to be more supported and stable: |
Beta Was this translation helpful? Give feedback.
-
Any update on this? All Cloudflare needs is the right response format and it automatically generates early hints: |
Beta Was this translation helpful? Give feedback.
-
Describe the feature you'd like to request
Some CDNs like Cloudflare support the Early Hints web standard.
This can dramatically improve the page loading speed as the CDN can hint to the browser the render-blocking resources (CSS, Fonts, etc.) that need to be downloaded.
Describe the solution you'd like
Next.js could add the appropriate Link headers to any HTML response with preload for any stylesheets that Next.js is going to add the
<head>
. Doing so will allow CDNs to cache these headers. On the next request, they can return the headers early while the CDN waits for the complete response.Describe alternatives you've considered
I've considered implementing this ourselves within Next.js, but it is difficult (if not impossible?) to know the URLs to the CSS files from within Next.js itself.
Beta Was this translation helpful? Give feedback.
All reactions