Hi Devs,
I am trying to implement Early Hint Headers (Status Code 103) for my next js application at cloudflare worker. And I want to add some static assets like 'https://int2-www.my-domain.com/assets/icons/cart-light.svg', 'https://int2-www.my-domain.com/assets/fonts/Circular-Bold.woff2' to my Early link headers which i will emit from my cloudlfare worker, as 103 response code.
I have implemented this solution at my handler at worker:
const url = new URL(originalRequest.url);
const origin = url?.origin || '';
const earlyHintLinks = [
<${origin}/assets/fonts/Circular-Ultra.otf>; rel=preload; as=font; type=font/otf; crossorigin,
<https://assets.my-domain.com/image/upload/c_pad,dpr_1.0,f_auto,q_auto,h_636,w_636/full-path.jpg&g… rel=preload; as=image,
<${origin}/assets/icons/star-golden-full.svg>; rel=preload; as=image,
<${origin}/assets/styles/smart-banner-styles.css>; rel=preload; as=style,
];;
// Build the headers for Early Hints
const earlyHints = new Headers();
earlyHints.set('link', earlyHintLinks.join(', '));
// Try Early Hints if available
if ((originalRequest.cf as any)?.early_hints) {
event.waitUntil((originalRequest.cf as any).early_hints.send(earlyHints));
} else {
// Fallback: set Link header on the real response
response.headers.set('link', earlyHintLinks.join(', '));
}
return response;
I am not able to get a seperate 103 Status Code with these response headers, and I am getting only a 200 status reponse on that page call in my network tab, where I have one more section of EarlyHints Headers, just before the Response header, which contains the headers i have appended earlier from worker.
I am not getting much help from worker.
How can i get a seperate 103 status repsonse with these link headers, and implement early hints properly. Am i following some wrong documentation here?
Can anyone please help?
7 Replies
Where did you see that
request.cf.early_hints is a thing?Claude suggested this, I thought it's part of worker API docs. Now i couldn't find any mention of htis anywhere. 😩
Here's the current doc for Early Hints on Workers https://developers.cloudflare.com/workers/examples/103-early-hints/
Cloudflare Docs
103 Early Hints
Allow a client to request static assets while waiting for the HTML response.
As per my current implementation if block is not executed because request.cf is undefined, so it goes to else block, and else block is implemented as per this doc.
Do you have EarlyHints enabled on the dashboard?
Yes
I'm not sure then, unfortunately