Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.
To show an examples of the many variants an implementations here is an example:
In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using
In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using
Main Concern:
I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question:
Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using
import { createTRPCNext } from '@trpc/next';import { createTRPCNext } from '@trpc/next'; And this is for nextjs Page router. In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using
import { createTRPCReact } from "@trpc/react-query";import { createTRPCReact } from "@trpc/react-query"; The T3-OS seems to be the closest to what I want, but they don't use clerk. And The repo the reference for clerk auth is out of date. Main Concern:
I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question:
Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Solution
@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.
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.
