0

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.

7
  • Requests should be processed in parallel if the main thread is not blocked. I observed something weird once where it looked like requests were made in series but could not reproduce it since. Maybe some dev server issue, can you reproduce this with build & preview? Commented Aug 18, 2024 at 22:41
  • If you can reproduce it, show the code necessary for a minimal reproduction Commented Aug 18, 2024 at 22:42
  • I have the same behavior in preview mode. Based on my investigation (which is still going on) it looks like that the fetch function in the server.ts file is the one "blocking" everything. As I mentioned, this fetch waits for 6-7 seconds, and it looks like that is this waiting period that is blocking the main thread. In fact, If I fake a response and instantly return, everything is executed in parallel. I will create a repro but it will take a bit because I need a repository, because I cannot create an online svelte playground with server files (I think) Commented Aug 18, 2024 at 22:52
  • All the code needs to be here, in the question. Repos and REPLs have to be optional links. Commented Aug 18, 2024 at 23:12
  • 1
    I tried running that code here on Stack Overflow using the console in Firefox (Mac), and all 5 numbers are logged after 5 seconds for me. Then I tried the same in Chrome (Mac), and there they are sent one at a time, as you observed. That is strange. Commented Aug 19, 2024 at 12:37

1 Answer 1

2

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.)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.