`@trpc/next` with `ssr: true` breaks `getServerSideProps`

Notes by @KATT:

• Solving this is blocked by https://github.com/vercel/next.js/discussions/28183.
• Keeping this open for visibility, but it likely won’t be fixed.
• See warning-block at https://trpc.io/docs/ssr

---

@trpc/next: 8.0.0-alpha.6

Using:

export default pipe(
  App,
  withTRPC({
    ssr: true,
    config: (_ctx) => ({
      url: "http://localhost:3000/api/trpc",
      queryClientConfig: {
        defaultOptions: {
          queries: {
            staleTime: 600
          }
        }
      }
    }),
  })
)

Any page with getServerSideProps, for example:

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  return {
    props: {
      user: {
        name: 'x',
        email: "y"
      }
    }
  }
}

Will receive undefined props, then get refreshed with props (the latter usually never executes due to errors using undefined)

Removing withTRPC hof stops this behavior.

[GuiSim]

Alex, I truly appreciate what you’ve done with this library and I understand that this is a limitation of Next.js.

I’m glad we have a workaround and I don’t mean to put pressure on you to deliver anything here. Thanks again for the solid lib.

For me, the main value of TRPC is a typesafe API between my frontend and my backend using shared types. The rest is just gravy on top 😃

[KATT]

I’m a one man band making tRPC, all example projects, and docs… there are limits to what I have bandwidth to do. Super keen to take on pull requests from contributors with the gaps as you learn the edge cases.

This issue of combining getSSR+getSSG and getInitialProps is out of my hands to fix as it’s an issue with Next.js - if you have ideas for workarounds, they are welcome as well.

If you encounter this, set ssr: false in your _app.tsx.