google-chromesveltehttpwebrequestsveltekit

Multiple fetch requests NOT executed in async on Chrome on Windows


I am developing a simple website using Svelte, with a frontend server in Svelte and a backend server in NestJS. Currently, I'm working on my local machine.

The issue:

I am sending a request from my website to my "frontend server endpoint" in Svelte (located in the +server.ts file). This request is then forwarded to my NestJS server.

I'm using Promise.all to send 6 parallel requests from my website to the Svelte server. The Svelte server then reroutes these requests to the NestJS server and waits for the responses (since it's a heavy process, it typically takes 4-5 seconds).

All the requests are sent instantly from the website, I can verify this from the network tab. However, the Svelte server takes a significant amount of time (around 6-7 seconds) to actually receive these requests. It receives the first request and then it slows down. I don't understand why this delay is happening.

In my +server.ts file, I'm using async/await. My initial thought was that the Svelte server might be blocked while awaiting the NestJS server's response. However, I expected that the Svelte server would handle the async/await code for me, potentially creating workers or otherwise managing the asynchronous operations. Is my assumption incorrect?

Thanks!

Update

It is not Svelte related. I investigated (keeping in mind @Peppe L-G comment) and this is what I found out:

I created a simple HTML file with this code:

<script>
    fetch("https://httpbin.org/delay/5", { method: "GET" }).then(() => {
      console.log("1");
    });
    fetch("https://httpbin.org/delay/5", { method: "GET" }).then(() => {
      console.log("2");
    });
    fetch("https://httpbin.org/delay/5", { method: "GET" }).then(() => {
      console.log("3");
    });
    fetch("https://httpbin.org/delay/5", { method: "GET" }).then(() => {
      console.log("4");
    });
    fetch("https://httpbin.org/delay/5", { method: "GET" }).then(() => {
      console.log("5");
    });
  </script>

My expectation was to see the console.log to be executed almost at the same time. The API endpoint will reply after 5 seconds, simulating a heavy request. Everything is executed synchronously! A fetch is executed only after that the previous one is done. The same code, in nodeJS, is executed asynchronously. I am using the latest chrome version in Windows 11.


Solution

  • It looks like this is due to the browser's caching logic. If the endpoint is the same, the requests are performed in sequence in case the first response is cacheable and the later requests can just be skipped.

    This is why you can get inconsistent results when observing this, e.g. I opened dev tools and the problem went away because the "disable cache" box was on, so all requests were immediately processed.

    Realistically this should not be an issue since there usually is no point in sending multiple identical requests. In case you really need to do that, maybe because the state is hidden on the server, try e.g. adding a query parameter that differentiates the requests.

    (If you execute POST requests, e.g. change your https://httpbin.org/delay example to use that, the requests should also not be delayed.)