Best Practices: tRPC vs. Server Actions/Loaders with TanStack Start, Drizzle, Neon, and Better Auth
I'm migrating a mock API to TanStack Start, Drizzle ORM (Neon DB), and Better Auth.
I've also started integrating tRPC for my API (/api/trpc), with routers for listings, reviews, and auth.
I'm aware of the shift towards Server Actions (and React Server Components/use hook) in frameworks like Next.js, favoring server-centric data fetching/mutations over client-side libraries.
My core question for TanStack Start is:
Given my stack, what are the recommended best practices for data fetching and mutations?
For Mutations (C, U, D - e.g., createListing, deleteReview):
Should I primarily use TanStack Start's Server Actions directly with Drizzle for automatic revalidation and smaller client bundles?
Or continue with tRPC mutations (trpc.listings.create.useMutation())? What are the trade-offs?
For Reads (R - e.g., getListings, getReviews):
For initial page loads and static data, should I use TanStack Start's Server Loaders/Server Components (direct Drizzle calls)?
For dynamic client-side fetching, real-time updates, or complex caching, is tRPC queries (trpc.listings.list.useQuery()) still the recommended approach, or are there native TanStack Start ways using new React features?
I'm seeking guidance on the optimal hybrid approach (or a full switch recommendation) to balance DX, performance, and leverage each technology's strengths within the TanStack ecosystem.
1 Reply
yappiest-sapphire•5w ago
Have you take a look at Convex? There's a lot of good stuff that comes out of the box from this DB/Sync engine 🙂
Then when it comes to querying the data, I am a big fan of the combination of react-query + loader.
https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query