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?
- 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
- The TRPC client reads said headers
I feel like this should be listed somewhere on the docs.
- A server component runs
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.
