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

Nnehalist

4/14/2023

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

Nnlucas

4/14/2023

I doubt tRPC has anything to do with this honestly Best to ask in the packages you’re trying to use

Nnehalist

4/14/2023

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

Nnlucas

4/14/2023

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

Nnehalist

4/14/2023

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

Ttrash_dev

4/14/2023

cc @Tom - QuiiBz i know you have a next i18n lib so maybe you have some pointers

UUUnknown User

4/14/2023

2 Messages Not Public

Nnehalist

4/15/2023

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

UUUnknown User

4/15/2023

Message Not Public

Nnehalist

4/15/2023

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>
  );

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

UUUnknown User

4/15/2023

Message Not Public

Nnehalist

4/15/2023

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

UUUnknown User

4/15/2023

2 Messages Not Public

Nnehalist

4/15/2023

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

UUUnknown User

4/15/2023

Message Not Public

Nnehalist

4/15/2023

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? 😄

UUUnknown User

4/15/2023

2 Messages Not Public

Nnehalist

4/15/2023

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

UUUnknown User

4/15/2023

3 Messages Not Public

Nnehalist

4/15/2023

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 😄

KKulimantang

5/10/2023

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