Max
Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.
@DiamondDragon @makistos @here
1. Sorry I didn’t see these notifications earlier!
2. Like 90% > are using NextJS (Page) & TRPC.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
18 replies