Any equivalent to “use client” for SSR

[mellow oxide]

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.

[haughty gust]

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).

[unreal plover]

Is it because they prerender in server ?

[haughty gust]

yes!

[wheat abyss]

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 ^_^

[wise tree]

What about ClientOnly is not the same ???

[uncut talon]

what exactly is missing?

[wheat abyss]

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"

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

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.

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

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

[wheat abyss]

🙂

[uncut talon]

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

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

[wheat abyss]

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!)

[uncut talon]

yeah why would you even think about 'use client' ?

if you are building an SPA

[wheat abyss]

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

[uncut talon]

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

they are just ignored

[wheat abyss]

makes sense