Svelte Interview Questions

What are SvelteKit remote functions and what problem do they solve compared to traditional +server.ts endpoints or load functions?

Remote functions “can be called anywhere but always run on the server”. Explain what that means in terms of:

• security
• access to server-only modules
• bundling/client code

What are the four kinds of remote functions, and when would you choose each?

• query
• form
• command
• prerender

How does the client actually call a remote function internally? What gets generated and how is it invoked?

Why are remote functions marked as experimental and what must be configured to enable them?

Answer key hints:

• kit.experimental.remoteFunctions in svelte.config.js
• optionally compilerOptions.experimental.async to allow await in components

Where can .remote.ts / .remote.js files be placed in a SvelteKit project, and what’s the notable exception?

Why are remote function files not allowed under src/lib/server?

Tricky: This checks understanding of bundling and server-only boundaries, not just recall.

For a src/routes/blog/data.remote.ts file with a getPosts query, describe:

• Where the server-side code runs
• Where the client bundle gets its callable function from
• How these are wired at build time

Are remote functions available to third‑party libraries? Describe a scenario where a library might ship its own remote functions and how an app would use them.

Describe the typical use case for query vs prerender. When is query the right tool?

In the docs, await getPosts() is used directly in a Svelte component with #each await getPosts() as .... Explain:

• What happens on first render
• How errors are handled in relation to <svelte:boundary>

query instances also expose .loading, .error, and .current. When might you prefer this style over await in markup? Give a concrete UI example.

How do you define a query function that accepts an argument (e.g. slug) and is type-safe?

Why does the documentation recommend using a Standard Schema (Zod, Valibot, etc.) when defining a query that takes arguments?

What happens if the input schema validation fails inside a remote query?

Tricky: Expect: the function never runs (depending on how you pass schema), SvelteKit rejects before your logic; or you receive an issue result depending on the signature.

How would you implement a getPost(slug) remote query that: - validates slug as a non-empty string - returns 404 if no post is found - is safe against SQL injection

Explain what query.batch does and why you might want to use it.

How does query.batch change the number of HTTP requests compared to calling a normal query multiple times?

The batch handler receives an array of inputs and must return a function that maps each input to an output. Why this design instead of simply returning an array of results?

Tricky: This is about preserving order, laziness, and potentially error handling per item.

Imagine you have a list of product IDs and your UI calls getProductDetails(id) multiple times. Sketch how you would convert this to a batch query using query.batch.

What is a remote form function, and how is it different from a regular HTML form action in SvelteKit (+page.server.ts actions)?

The form helper returns an object that “can be spread onto a <form> element”. What kind of things do you expect that object to contain?

Tricky follow‑up: Why is this approach useful compared to manually wiring fetch handlers on submit?

The form function has three overloads:

• no input
• validate: 'unchecked'
• Standard Schema based validation

For each, describe a realistic use case.

In a schema-based form, you receive (data, issue) as arguments:

• What is issue used for?
• How would you use it to mark a single field as invalid?

How would you implement a login form using a remote form that: - validates name and _password with Valibot or Zod - sets a field-specific error if the login fails - prevents leaking which field is wrong (for security)?

What is a remote command and how is it conceptually different from a query?

In which situations would you choose a command over a form?

The command function also allows:

• validate: 'unchecked'
• Standard Schema based validation

How is validation behavior for command different from form in terms of what the consumer (client code) sees?

Give an example of a mutating operation implemented as a command where:

• You validate the input with Zod/Valibot
• You handle and surface domain-level errors (e.g. “insufficient funds”)

How would you call a remote command from a component that uses Svelte’s experimental await support? What does the UI look like while waiting and on error?

What is a prerender remote function used for, and how is it different from a query?

The prerender helper accepts an options object with inputs and dynamic.
Explain:

• What inputs is for
• What dynamic: boolean does

Describe a scenario where you would:

• Use prerender to generate static data at build time
• Later still call the same function at runtime in the browser via fetch

Tricky: This tests understanding that it’s still a remote function with a generated endpoint.

How does prerender integrate with SvelteKit’s normal route prerendering mechanism (e.g. +page with prerender = true)? Where would their responsibilities overlap?

What configuration changes in svelte.config.js are required to:

• Enable remote functions
• Enable await usage in Svelte components

Why is compilerOptions.experimental.async required for await in components, and what risks or caveats does this imply?

The docs recommend using <svelte:boundary> for promise handling. How does this interact with remote queries, and why is it preferable to manual loading flags in many cases?

When would you prefer using the query.loading / query.error / query.current API rather than await with <svelte:boundary>?

Remote functions expose HTTP endpoints. What security implications does this create, and how does schema validation help mitigate them?

Why is it dangerous to skip validation and pass validate: 'unchecked' on anything exposed as a public endpoint?

In a remote function using a SQL database, what patterns from the docs help:

• avoid SQL injection
• handle “record not found” vs real server errors

The error(status, body) helper is used in remote function examples. What happens when you call error(404, 'Not found') inside a remote function?

How do errors thrown inside remote functions surface on the client side? What do you see in:

• an await block
• query.error

How would you instrument authentication/authorization inside remote functions to ensure that:

• unauthenticated users can’t call them
• roles/permissions are enforced per function

Tricky: Good candidates should mention sharing auth helpers, using getRequestEvent() in shared server utilities, etc.

How can you access the current RequestEvent from inside a remote function, and why might you want to do that?

The observability docs mention that remote functions participate in OpenTelemetry tracing. How could you, from within a remote function, annotate the current span with a userId or operation tag?

What constraints around AsyncLocalStorage and getRequestEvent() might influence how you write your remote function code?

Tricky: This tests understanding that in environments without AsyncLocalStorage, getRequestEvent() must be used synchronously (not after an await).

Suppose you have:

• A blog listing page
• A blog detail page
• A “like post” button

Describe how you’d use:

• query for listing and detail
• command or form for “like”
• validation and error handling for each

You want to share a set of server operations (DB queries, authentication) across:

• classic +server endpoints
• load functions
• remote functions

How would you structure your code (file locations, shared modules) while respecting src/lib/server constraints?

Your project started with normal +page.server.ts actions and +server.ts endpoints. You now want to migrate some logic to remote functions to simplify client calls. What are the main migration steps and challenges?