We have what I assume is a fairly standard JAM Stack site setup. When you navigate to /:id we rewrite to /index.html and after the page loads we trigger a request to /api/:id to fetch the data for the page. This has been fine but could be better.
I’d like to setup a header rule (needs to be in _headers file) to add the Link prefetch header to our requests for the initial page.
See: [Link prefetching FAQ - HTTP | MDN](Link Prefetch at MDN)
I would imagine the header rule to look something like:
/:id
Link: </api/:id>; rel=prefetch
However when I do this I get a 403 as my browser tries to prefetch “/api/:id” I’m guessing this is because while placeholders are supported in the path they’re not replaced when actually generating a header?
The main advantage of this would be to do things like this prefetching. Especially in cases like some of our sites where we’re pulling down a decent sized react bundle and a decent sized data blob if we could run the two in parallel it would probably cut our loading time significantly.
While headers would be the best way to do this it would be almost as valuable to leverage injection of a <link rel=“prefetch” … /> tag into the head of the index.html route. However that injection would have to be based on the path that the file was originally requested at, and should only apply to a specific set of assets, neither of which seem possible through snippet injection.