How to add boundary between client bundle and server bundle in TanStack Start?

[TheOrdinaryWow]

In Next JS, we can simply add "use client", "use server" directives in files or functions. How can we do the same in TanStack Start?

eg. I want to import a module on client-side only, but it all ends running on server as well, which will panic if runs not in browser environment. "use client" had no effect on that. Attempt to adjust vinxi config got me no help.

I wonder how to do it properly / what's the best practice?

[drewhamlett]

I don't think you're understanding how 'use client' or 'use server' works. 'use client' just marks an entry point between RSC and client components. The components are still server-rendered, though (traditional SSR). 'use server' exposes functions as HTTP endpoints (server actions). Tanstack Start already has something for this called server functions (createServerFn) which is a much better interface, more flexible and doesn't suffer from the worst developer ergonomics of all time.

To answer your original question there is such a thing as server only or client only in Vite. Similar to the import 'server-only' in Next. You can have directories or files called something.server.ts or something.client.ts. There is also https://www.npmjs.com/package/vite-env-only

[TheOrdinaryWow]

This is so good. Thanks for your help.