Is fetch() in Svelte Hooks handle bad, and has alternatives?

[alissa-tung]

Hello, I am trying to write a handle function, which will bypass the SvelteKit, and proxy the request to gRPC-Web API server.

My initial approach is

const apisHandle: Handle = async ({ event, resolve }) => {
  if (event.url.pathname.startsWith("/apis")) {
    return handleApis({ event, resolve });
  } else {
    return resolve(event);
  }
};

const handleApis: Handle = async ({ event }) => {
  const session = await event.locals.auth();
  if (!session) {
    throw redirect(302, "/auth/signin");
  }

  return fetch(
    request.url.replace(/https?:\/\/[^\/]+\/apis\//, "http://127.0.0.1:3050/"),
    request,
  );
};

the APIs are been called correctly, but the dev server says

Avoid calling `fetch` eagerly during server side rendering — put your `fetch` calls inside `onMount` or a `load` function instead

My questions are the following

1. why fetch is not encourage here? (and I wish there can be some link to docs about this)
2. is there alternative way to do such a proxy? (or more Svelte way to do so)
3. do the fetch happened in async concurrently, or blocks in order? (React server actions did in such a blocking way, which I want to avoid)

(and of course it's okay to set up a gateway (Nginx, Caddy, ...) for proxy an API server, I want to do in Svelte is that I can provide some info gathered by JavaScript and code in my Svelte app codebase to made the new request that should be proxied, so I would chose to have a try in the handle)

---

in addition, if I disable SSR for the page, in client side console

Loading http://127.0.0.1/xxxxx using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests

connectrpc es does have some documentation to fix this, and

I read about

During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request - if you received a warning in your browser console when using the browser fetch instead of the load fetch, this is why.

Since SSR has been disabled, I am not sure will hydration still able to gather response from HTML? (If so, would we disable this warning when SSR is disabled?)

---

Thank you!

[david-plugge]

1. Try using event.fetch and the warning should go away. The warning ist a bit misleading in my opinion as there are valid use cases like yours where you do want to use the global fetch function
2. That probably is the easiest way but you can also use an api endpoint src/routes/api/[...rest]/+server.ts to keep it more organized
3. Its as async as JS can get
4. Without SSR you dont need to use event.fetch in shared load functions, but sveltekit does not toggle the warning depending on wether SSR is in or off. This could be a good feature. Without SSR you dont get hydration

[alissa-tung]

thank you