sveltejs / sveltejs/kit

Remote Functions: allow returning raw binary responses

Open
#16,524 5 comments 0 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

When dealing with binary data, I would like to avoid the serialization/deserialization and size overhead caused by passing it through devalue.

Currently, doing so requires creating a separate +server.ts endpoint and manually fetching it on the client. While that is simple enough, if such thing is feasible and makes sense, I would prefer to retain the ergonomics of remote functions while returning binary responses.

Describe the proposed solution

Provide a way for a remote function to return binary data

export const generate_pdf = query({ text: v.string() }, async ({ text }) => {
	const file = await get_file();
	const processed = await fill_with_user_input(file, text);

	return binary(processed);
});

or even avoid the binary() abstraction and just let the user handle it with a standard response:

return request.headers.get('if-none-match') === etag
	? new Response(null, {
			status: 304,
			headers: { etag }
		})
	: new Response(await processed.save(), {
			headers: {
				'content-type': 'application/pdf',
				'etag': random_hash(),
				'cache-control': 'private, no-cache'
			}
		});

And ideally consume it like this on the client:

<script lang="ts">
	import { generate_pdf } from './pdf.remote';
	import ShowPDF from './ShowPDF.svelte';
</script>

{let text = $state('')}
{let pdf = $state<Blob>()}

<input bind:value={text} />

<button onclick={async () => pdf = await generate_pdf({ text })}>
	Update PDF
</button>

<ShowPDF file={pdf} />
Alternatives considered
  • Continue having +server.ts endpoint for fetching the updated file, while having the additional logic that manipulates that same file in a different handling.remote.ts

  • Avoid the HTTP approach and defer this to what SvelteKit will end up with for their WebSocket implementation.

Importance

nice to have

Additional Information

Related to #16285 only if the APIs introduced there end up overlapping with this proposal. (Although my issue has more to do with same-origin responses)

A similar need for efficient binary transport was also mentioned here:
Originally posted by @garth in https://github.com/sveltejs/kit/discussions/13897#discussioncomment-14558984

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 by reviewing the remote-function entry points and the handling.remote.ts and +server.ts approaches mentioned in the issue, then compare how responses are currently serialized and consumed. Define the supported response shape and client behavior, including binary data and standard HTTP responses, and validate the design against the generate_pdf example and the related #16285 discussion.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
api, backend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.