Zion
Zion6mo ago

tRPC and vite serverless, are there any exmaples?

Now that tanstack router is out I would want to move out of nextjs, but keep the convenience of hosting on vercel with serverless. I saw that theres some vite-vercel plugin (vite-plugin-vercel) for SSG/ISR/serverless functions, but not sure how I would integrate it with tRPC. are there any exmaples for something like that?
15 Replies
Ahmed Elsakaan
Ahmed Elsakaan6mo ago
vite by default isn't a full stack type of tool, so it can't be compared with nextjs fully. What I would recommend if you're going with that route is to just have tRPC as it's own server using the standalone adapter and seeing if that works for you, you can use other adapters like fastify for example if you need something more than that.
Zion
Zion6mo ago
Yeah, I made a template with fastify and vite, it works well, but I'd like to have a solution I can host on vercel, and have ssr/ssg. the vite-vercel plugin seems good, but Im not sure theres a adapter for it
Ahmed Elsakaan
Ahmed Elsakaan6mo ago
if it uses normal request/response you can hook up the trpc fetch adapter to it @julius 😜
Ahmed Elsakaan
Ahmed Elsakaan6mo ago
Fetch / Edge Runtimes Adapter | tRPC
You can create a tRPC server within any edge runtime that follow the WinterCG, specifically the Minimum Common Web Platform API specification.
julius
julius6mo ago
really depends on what server framework you end up going for
Ahmed Elsakaan
Ahmed Elsakaan6mo ago
apparently vite has a vercel plugin that allows you to do api endpoints like next.js
julius
julius6mo ago
i looked into vinxi+nitro (same as SolidStart went for) and looks quite proimising to build something nice with
Zion
Zion6mo ago
I see that vinxi have their own router tho? (unless I didnt get the docs right), I really want a stack with tanstack router, a stack of vite-trpc-tanstack router with othert features from nextjs (ssr/ssg/isr and serverless - if possible) would be really powerful and full typesafety. seems like the vite vercel plugin takes care of it, no idea how to use trpc with it tho
julius
julius6mo ago
https://github.com/nksaraf/vinxi/tree/main/examples/react/ssr/tanstack-router-app you can also just take tanners example and add a trpc route to the express router https://github.com/TanStack/router/blob/main/examples/react/basic-ssr-streaming-file-based/server.js https://trpc.io/docs/server/adapters/express trpc is really flexible in how to "host" it so i think that would be the least of your problems 🙂
Zion
Zion6mo ago
ok thats cool, I assume vinxi isnt really production ready yet tho, from the version numbering. I dont really mind having a stateful server like express/fastify, but where would I host it? the docs for it seems empty (in vinxi)
julius
julius6mo ago
you can deploy it serverless to vercel no problems https://vercel.com/guides/using-express-with-vercel#standalone-express
How to Deploy an Express.js Application to Vercel
Learn how to deploy an Express.js application to Vercel using Serverless Functions.
julius
julius6mo ago
doesn't have to be stateful
Zion
Zion6mo ago
neat, I tried deploying serverless fastify in a monorepo and had lots of problems with making it run in dev or production, hope I wont have the same issues. does it matter if I use express or fastify? (as in, performance or whatever)
julius
julius6mo ago
i think fastify is more performant but express has a larger ecosystem
Zion
Zion6mo ago
hm, would the ecosystem really play a part if I just use trpc and its serverless? dont really know much about backend stuff