why does the create-post.tsx component need the 'use client' directive in the default project?

I'm a n00b with create-t3 but have used all these technologies in the past (except tRPC). Recently, I've been more focused on DevOps so it's my return trip to the Javascript ecosystem.
I follow Theo's YouTube channel and wasn't sure if it was something he'd mentioned on a video or something I saw in the docs, but the create-post.tsx file in the default ct3-app uses the 'use client' directive and I can't seem to find the explanation anywhere. I know I either saw or heard it and it's driving me nuts.
I'm familiar with difference between client components and server components in React (I was a React dev before I started getting more interested in cloud/devOps).
Forms would be a great use case for server components and I'm just curious why these were pre-written like this? I'm guessing it's something with tRPC? I'm going to start playing with it so will update if I can figure anything out, but if anyone knows the video or the place in the docs I'm talking about, I'd really appreciate it!
No description
2 Replies
$c0rp-EE-yen
$c0rp-EE-yen5mo ago
I didn't find exactly what I was looking for, but I did at least get an answer to this questions. The issue is with React Query as it only runs client-side
shivam
shivam5mo ago
the "use client" directive is not related to trpc. generally, all components are server rendered and the "use client " is used when you want to render the file/component on the client side. hope it helps
Want results from more Discord servers?
Add your server
More Posts
Increase api file size limit on t3 stackIm sending a image that exceeds 1mb file size limit of nextjs api route handler, and want to increasNo background color for shadcn/ui components in T3 appI started working with a T3 app and couldn't get shadcn/ui styling to behave properly. The problem w`fetch` not working in Next.js API, the strangest issue I've encounteredI'm using t3 with pages router, and in one particular API call I'm trying to fetch a particular imag504 timeout for large data requesthave an api where i am fetching data with different timeframes. when i select the timeframe of "all Trpc useQuery keeps refetching even with no errors (I am getting back data every time)Hey everyone, I tried looking into why this might happen, and either dont know enough about it to deHow to configure Vitest in T3?Hello everyone, I'm currently working on implementing the Vitest example for TRPC as outlined in thUse of Next JS Server Actions in a projectHello everyone! would like to get your thoughts on this. I am working on a next js web app projecthow do I rate limit on nextjs api routes on app router?hey, currently using [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/Keeping references to processes in nextjsHey, im trying the t3 stack and i have a quetions about nextjs in general. So the issue is that on Cannot update a component HotReload while rendering a differenet componentI try to call a server action from a client component, and I get this error for some reason anyone k