19

Given a JSON API endpoint /api/config, we're trying to use <link rel="prefetch" href="/api/config"> in the head of an HTML document. Chrome downloads the data as expected when it hits the link tag in the HTML, but requests it again via XHR from our script about a second later.

The server is configured to allow caching, and is responding with Cache-Control: "max-age=3600, must-revalidate" in the header. When Chrome requests the data again, the server responds correctly with a 304 Not Modified status.

The use case is this: the config endpoint will always be requested from the Javascript in our single page application using XHR (an AngularJS resolve, in case it's relevant). However, our scripts are very large and take a long time to parse, so the JSON config will not be requested until the parsing is finished. Prefetching would allow us to use some of that parsing time to fetch and cache responses from API endpoints that would otherwise have to wait for the scripts to load.

bsa
  • 2,671
  • 21
  • 31

2 Answers2

6

Yes you should be able to preload JSON Read here.

fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.

So try this syntax: 

<link rel="preload" href="/api/config" as="fetch">
Jens
  • 1,599
  • 14
  • 33
  • 1
    Does it support the post or how to define the link's attributes if the method is "post" with some params? I didn't find it in [w3c](https://w3c.github.io/preload/#link-element-extensions) – sknight Jun 26 '19 at 16:12
  • @sknight The href will make a GET request. To my knowledge only a FORM element (or JS) can make a POST request. What you could do is to add the parameters to the URL like this: href="/api/config?param1=foo&param2=bar". – Jens Jun 27 '19 at 19:43
  • 2
    I got this message in the console on Chrome. `A preload for 'https://localhost/api/config' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.` I resolved this by using `crossorigin="anonymous"`. – Indiana Kernick Dec 09 '20 at 00:44
1

From MDN:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

IMO, prefetching data for the user, before he need it for future navigation is quite similar to prefetching an image before the user navigates to it.

Another approach can be done with web worker, fetching data in a parallel thread.

Sebastian Kaczmarek
  • 8,120
  • 4
  • 20
  • 38
Okoch
  • 445
  • 2
  • 5