Is this blog correct? Trpc and next.js 13.4, App directory
I working on integrating with TRPC with the App directory and was given a solution but i'm not sure if the author or myself have the right understanding of how server components work with client components.
The scenario:
By adding the ‘use client’ directive in the route app layout file which the author suggests, wouldn't that mean all children components would become client-side components, so we would loose the benefits of server components?
I was referring to this line in the blog specifically
“This can be achieved by wrapping the provider around the {children} node in the
So this would mean next would render all children components as client components, as the provider would have to be at the root of the tree. Meaning are whole app would basically be a client side rendered app?
https://codevoweb.com/setup-trpc-server-and-client-in-nextjs-13-app-directory/#comment-1755
I got a response from the blog author
“I understand your point now. It's important to note that Client Components can be rendered within Server Components as long as the "use client"; pragma is included in the files that have the Client Components. Wrapping the tRPC provider around the prop of the root layout component allows Next.js to make the hooks and components from the tRPC library available to all Client Components that are descendants of the root layout component. It's important to remember that even though you've wrapped a provider component that has the "use client"; pragma around the prop of the root layout component, Next.js will still render all components inside the app directory as Server Components. This means that the only way all your components will be Client Components is if you include the "use client"; directive at the beginning of the files that contain them. I hope this explanation clarifies things for you. If you have any further questions, please don't hesitate to ask.”
The scenario:
By adding the ‘use client’ directive in the route app layout file which the author suggests, wouldn't that mean all children components would become client-side components, so we would loose the benefits of server components?
I was referring to this line in the blog specifically
“This can be achieved by wrapping the provider around the {children} node in the
src/app/layout.tsx fileSo this would mean next would render all children components as client components, as the provider would have to be at the root of the tree. Meaning are whole app would basically be a client side rendered app?
https://codevoweb.com/setup-trpc-server-and-client-in-nextjs-13-app-directory/#comment-1755
I got a response from the blog author
“I understand your point now. It's important to note that Client Components can be rendered within Server Components as long as the "use client"; pragma is included in the files that have the Client Components. Wrapping the tRPC provider around the prop of the root layout component allows Next.js to make the hooks and components from the tRPC library available to all Client Components that are descendants of the root layout component. It's important to remember that even though you've wrapped a provider component that has the "use client"; pragma around the prop of the root layout component, Next.js will still render all components inside the app directory as Server Components. This means that the only way all your components will be Client Components is if you include the "use client"; directive at the beginning of the files that contain them. I hope this explanation clarifies things for you. If you have any further questions, please don't hesitate to ask.”
CodevoWebEdem
Are you interested in using tRPC in the new Next.js 13 app directory? Look no further! In this article, I’ll walk you through the process...
