optimistic-gold

Any equivalent to “use client” for SSR

Just curious if there’s any convenient way to handle components that call for the window etc, without manually adding safety checks. Use case: shadcn components and easy copy paste into a Tanstack Start project that’s using SSR Nextjs has the “use client”, so something convenient like that.

16 Replies

rival-black•11mo ago

In Tanstack Start, all routes and components are client components; you can think of them as if they all have the directive at the top. However, even in client components, you need to add checks before accessing features that are unavailable in an SSR environment (even in next's client components).

exotic-emerald•11mo ago

Is it because they prerender in server ?

rival-black•11mo ago

yes!

wise-white•2mo ago

Thanks for this! I've tried to find an answer for this question in google, documentation, github issues, github discussions, ask AI. Nothing worked and it was here in discord ^_^

genetic-orange•2mo ago

What about ClientOnly is not the same ???

ambitious-aqua•2mo ago

what exactly is missing?

wise-white•2mo ago

Exactly this question. Coming form NextJS and seeing "use client" / "use server" everywhere not having a same thing in tanstack-start was weird while onboarding. I've checked everything and specially this: https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js mentions:

Server Actions Functions
tsx

- 'use server'
+ import { createServerFn } from "@tanstack/react-start"

Server Actions Functions
tsx

- 'use server'
+ import { createServerFn } from "@tanstack/react-start"

Then following the link in Server Functions I got:

When createServerFn is found in a file, the inner function is checked for a use server directive
If the use server directive is missing, it is added to the top of the function

When createServerFn is found in a file, the inner function is checked for a use server directive
If the use server directive is missing, it is added to the top of the function

Finally "use client" I didn't see anything but the previously mentioned "ClientOnly" component that seems different because it's placed in the usage and no the definition of a full component like "use client" does. In the end maybe we just need a mention (or even an example if suitable alongisde the use server one) of why use client isn't important in tanstack-start architecture.

Migrate from Next.js | TanStack Start React Docs

This guide provides a step-by-step process to migrate a project from the Next.js App Router to TanStack Start. We respect the powerful features of Next.js and aim to make this transition as smooth as...

wise-white•2mo ago

Not to mention that my code is actually filled with use client directives from shadcn add

wise-white•2mo ago

I'm unsure if i should change that with another directive/flag. leave it. use ClientOnly, etc. 🙂

ambitious-aqua•2mo ago

probably the docs should state that every component is rendered on the client

ambitious-aqua•2mo ago

did you have a look at https://tanstack.com/start/latest/docs/framework/react/selective-ssr ?

Selective Server-Side Rendering (SSR) | TanStack Start React Docs

What is Selective SSR? In TanStack Start, routes matching the initial request are rendered on the server by default. This means beforeLoad and loader are executed on the server, followed by rendering...

wise-white•2mo ago

No, I'll check it out. Was saerching for the use client keyword thanks 🙂 I'm working on an SPA so didn't check any server-side anything jejej (apart from server functions of course as the SPA mode doc explains No SSR doesn't mean giving up server-side features!)

ambitious-aqua•2mo ago

yeah why would you even think about 'use client' ? if you are building an SPA

wise-white•2mo ago

Oh because the ui packages are expected to work cross app in the future ant it seems a best practice (at least in next) to set "use client" when it makes sense

ambitious-aqua•2mo ago

yeah but if you dont SSR then those directives are not relevant they are just ignored

wise-white•2mo ago

makes sense thanks for the insight!

Gaming

Programming

Any equivalent to “use client” for SSR

Did you find this page helpful?