Has anyone ever used tRPC (with SSR) and i18n?

No matter the lib (next-intl, next-i18n, next-translate), I simply stumble from one problem to another - most of them simply solved by disabling SSR. Unfortunately, I need SSR and i18n. I know the GitHub issue that the problem here is on next.js, but anyone ever solved this? Hard to believe no one has ever used tRPC with i18n

I doubt tRPC has anything to do with this honestly

Best to ask in the packages you’re trying to use

https://github.com/i18next/next-i18next/issues/1682 😦

Ah I see

Probably a good idea to open a bug report with us then. I’m not experienced with SSR but having a GitHub issue will get the right people to see it

I often see SSR simply being turned off - but what's the point of using next.js then? It's just an spa then, or do I miss something?

Additionally, there's already an issue at your side - seems like you guys can't fix that: https://github.com/trpc/trpc/issues/596

cc @Tom - QuiiBz

i know you have a next i18n lib so maybe you have some pointers

Will try asap, thanks

while it seems to work, there's this weird behavior of as soon as I wrap my app in the I18nProvider my dom (ctrl+u) is suddenly empty and it seems SSR becomes completely broken. without the wrapping container all my data is inside the dom

Unfortunately no, but I'll setup a minimal reproduction repo

well, I don't understand anything at all anymore:

as soon as I wrap my app in an I18nProvider the dom becomes "Loading..." which comes from tRPC

const hello = trpc.hello.useQuery({text: 'client'});
  const t = useI18n();
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>inside i18n provider</p>
      <p>trpc: {hello.data.greeting}</p>
      <p>i18n: {t('hello')}</p>
    </div>
  );

but without the i18n provider everything is fine. hopefully this repo can help: https://github.com/nehalist/trpc-i18n

if you inspect the source code of this page it only shows the "loading..." dev. if you remove the i18n provider it shows the actual content

btw thanks for your time helping me

but this would hurt seo, or do I miss something?

I'm seriously considering switching to using tRPC only within getServerSideProps so that I can disable SSR, but dx suffers a lot imo with this approach

it's kinda weird that having i18n with tRPC causes such a chain of problems. feels like I'm the only one that wants a multi-language tRPC app? 😄

as far as I understand that should certainly fix this, ya, but also means that I cannot use tRPC queries directly within my components anymore and requires some major refactoring on my existing app

that's the big disadvantage of doing it this way, but it seems like it's the only thing that works

all of this feels like a "choose 2: i18n, trpc, seo" situation 😄

Hey guys, I just ran into the ssr problem yesterday myself and I'm also looking into using i18n 🙈. Did you have success in using ServerSideHelpers and have i18n, trpc and seo and the only drawback is bad dx? Would appreciate to know how it turned out for you