Document that vercel functions should be created as SvelteKit endpoints

[josefaidt]

Hello team 👋, really enjoying the svelte-kit experience so far!

One thing I noticed is when using vercel's serverless functions alongside a svelte-kit app there are a few nuances and unintended side effects, namely with client-side code not executing in local dev when svelte-kit is wrapped with vercel dev

minimal example repo: https://github.com/josefaidt/svelte-kit-vercel-local-issue

With vercel dev which executes svelte-kit dev -p $PORT and gives us the API routes

With svelte-kit dev, no API routes

When the application is deployed to vercel, everything appears fine! This seems to only affect local development.

• Live implementation: https://sk-vercel-local-issue.vercel.app/
• Live API route: https://sk-vercel-local-issue.vercel.app/api/hello

I've since found a way around this behavior and I am fully aware svelte-kit is in beta so this will likely change, however I wanted to bring it up and reach out in case I am going against the grain with this setup.

[wiesson]

I'm wondering that it works on vercel at all, because the functions may not be included in the .vercel_build_output.

[josefaidt]

For what it's worth this is with the static adapter. The way I was able to mitigate the behavior was to write the functions in CommonJS, add a package.json file inside the /api directory with all the necessary dependencies for the serverless functions (like node-fetch or querystring), and require() the routes in a Vite plugin to then be added to the vite dev server. By doing so I can simply run svelte-kit dev rather than vercel dev and still have access to the serverless functions in dev.

[MirrorBytes]

This also occurs with the vercel-adapter.

[antony]

Just in order to manage expectations here, I didn't consider vercel API functions at all when writing this adapter. It's not that we can't support them, they just aren't something we expect to work right now. If they do, that's pure chance.

After a chat with Leo from Vercel, the recommendation is to use Svelte Kit's endpoints to write functions in, and not use the Vercel provided functionality - Vercel functions are really intended as helpers if your chosen framework doesn't include a way to write serverless functions (or it is the blessed way to write serverless functions as it is in nextjs).

[josefaidt]

For using the static adapter would it still be recommended to use Vercel's serverless functions? Or ideally I would use the vercel-adapter and use the endpoints? My original thought was that it was odd that the client-side code wasn't being executed when wrapping svelte-kit dev with vercel dev.

Moving forward I'll try out the vercel-adapter and migrate my serverless functions to svelte-kit endpoints.

[josefaidt]

Update: migrating the functions into svelte-kit endpoints and the vercel-adapter work great! I'm able to use the .json.js files for api routes just fine. However now the pages that are generated from dynamic routes are failing to render. These are mostly blog posts, so is there a way to pull that blog post data in statically while still rehydrating the layout component? I have a "now playing" widget powered by spotify in my layout component but the post data won't change since it's pulled in from markdown files.

If I'm understanding correctly I should add

<script context="module">
  export const hydrate = false
  export const prerender = true
  export async function load({ page, fetch, context }) {
    const res = await fetch(`${page.path}.json`)
    const { post } = await res.json()
    return { props: { post } }
  }
</script>

however it still appears to fetch the json data for these static pages. example: https://www-josefaidt.vercel.app/posts/new-express-fs-router-features
and when using the static adapter https://josef.dev/posts/new-express-fs-router-features

[leerob]

I believe this can be closed now - agree with the recommendation to use adapter-vercel and the function inside SvelteKit!

[dsegovia90]

Hello, jumping in here to discuss a bit about serverless functions with sveltekit and vercel (and possibly others?).

I think there are 2 downsides of the current output of sveltekit endpoints functions with sveltekit. Currently endpoints hide behind the functions/render/index.js file, and from what I understand (see here), this creates only 1 serverless function, this issues are:

1. Scalability: If you have 10 serverless functions with sveltekit, all 10 will hide behind the same serverless function endpoint in vercel (functions/render/index.js). If, say sveltekit function 1 of 10 has a high number of requests, the vercel serverless functions would need to copy and spin un another render/index.js. Which means it needs to clone all 10 sveltekit functions to run just that 1 endpoint again. This can slow down cold boot times and increase cost per function due to increased memory per vercel (AWS under the hood) function, see here.
2. Memory/Size Limits: Functions could reach the memory or size limits if all functions are bundled together. See here.

Edit: There's also the problem of cold boot time. I assume it would be slower to boot a 10 sveltekit function bundle, than just 1.

Let me know if I'm making the right assumptions, or if there is some code that I'm not seing that splits the render/index.js file into multiple vercel (AWS) functions.

[tonprince]

Hi, I also think it would make sense to deploy the Sveltekit endpoints as separate Vercel serverless functions for the following additional reason.

I currently have an issue that I am unable to include a static html email template file in a sveltekit endpoint, as the file is opt out in the vercel build. The endpoint code throws an exception that the file cannot be found when running on Vercel, locally it works fine. I already tried to configure the functions includeFiles option in vercel.json, but this is not working as the sveltekit endpoint serverless function is not located under api which is a requirement.

Error: The pattern "functions/node/render/index.js" defined in functionsdoesn't match any Serverless Functions inside theapi directory. Learn More: https://vercel.link/unmatched-function-pattern

[mquandalle]

Would it be hard to implement independant Vercel functions for each Svelte kit endpoint given the current adapter logic?

[amr3k]

@tonprince Did you solve it?

[maiertech]

Would it be hard to implement independant Vercel functions for each Svelte kit endpoint given the current adapter logic?

@antony, is there a roadmap for adapter-vercel or some other discussion that we can follow with regards to how the adapter goes about combining endpoints in one serverless function vs. splitting them up into more than one function?

Would be curious what the pros and cons are and in what direction the adapter will move.

[tonprince]

@tonprince Did you solve it?

Actually I moved out the logic into an own Vercel serverless function in the api folder, and wrapped the html content into a json file which I than imported directly in the js code. That works fine.