sveltejs / sveltejs/kit

Allow using `fetch` with `agent` to reuse connections in server hooks

Open
#7,391 7 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

In the docs for handleFetch hook it recommends to hit the API directly during SSR, which I agree:

export async function handleFetch({ request, fetch }) {
  if (request.url.startsWith('https://api.yourapp.com/')) {
    // clone the original request, but change the URL
    request = new Request(
      request.url.replace('https://api.yourapp.com/', 'http://123.123.123.123:9999/'),
      request
    );
  }
 
  return fetch(request);
}

However, if we could reuse TCP connections, this could be a lot faster than reestablishing every TCP connection like above. This is especially important if anyone, like me, wants to act like a proxy inside handle hook to avoid any CORS requests to an API. Currently we cannot reuse TCP connections with fetch because there is no such agent option we can pass, as specified in node-fetch docs, making every request way too slow.

Describe the proposed solution

Because handle and handleFetch are both server hooks, I assume the fetch we are using here is node-fetch, right? So we should be able to do something like this:

import http from 'node:http';

const httpAgent = new http.Agent({
	keepAlive: true
});

export async function handleFetch({ request, fetch }) {
  if (request.url.startsWith('https://api.yourapp.com/')) {
    // clone the original request, but change the URL
    request = new Request(
      request.url.replace('https://api.yourapp.com/', 'http://123.123.123.123:9999/'),
      request
    );
  }
 
  return fetch(request, {agent: httpAgent});
}
Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

I have tried to use fetch with keepalive option, but it does not have any effect. Plus, I don't feel this keepalive option is a "server-side" thing:

fetch(request, {keepalive: true});

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the handleFetch documentation and the server-side fetch implementation used by server hooks. Reproduce the documented proxy-style request with a Node http.Agent, then trace how fetch options are handled. Done means server-hook fetch accepts the proposed agent option and can reuse connections, with coverage for the behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
backend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.