tRPCttRPC
Powered by
andyA
tRPC•9mo ago•
13 replies
andy

SSR with Client Components

I've been banging my head against the wall for a while now trying to get the following to work:

- I have a client component that gets queries for some data, but I want it to be able to get that data during SSR as well
- Right now, a request is made, but it does not pass along headers, causing it to throw an error on the server due to being unauthorized.

What's the correct way to pass along the headers from the initial request during SSR?
Solution
I finally managed to find an (incredibly janky) solution:

- A server component runs
await headers()
await headers()
and then passes it into a client component that then passes it into a context
- The TRPC client reads said headers

I feel like this should be listed somewhere on the docs.
Jump to solution
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

`useQuery` in client components
tomwyrTtomwyr / ❓-help
3y ago
Load data client-side via react-query while using tRPC with SSR
nehalistNnehalist / ❓-help
4y ago
SSR with NextJs app directory
WiznetWWiznet / ❓-help
14mo ago
SSR with initialData throws error
jlarmstJjlarmst / ❓-help
3y ago