How to use translation in server-side components

[jiangmaniu]

My project has some static pages, so I want to write the code and translation on the server level component, what is the way to do it?

[Clement-Muth]

My project has some static pages, so I want to write the code and translation on the server level component, what is the way to do it?

For now, Lingui doesn't support ssr. So <Trans/> and t will only work on the clientside.

What you can currently do is extract the text rendering into a separate clientside component from the rest of the ssr code."

// Home.tsx

const Home = () => {
  return (
    <ServerComponents>
      <ServerHeader />
      <ClientTitle />
    </ServerComponents>
  );
}

"use client"

const ClientTitle = () => {
  return (
    <Trans>Hello World</Trans>
  );
}

[jiangmaniu]

lingui/js-lingui#1698 (comment) Thekip provided the current temporary implementation plan yesterday, and through my actual test, I found that it worked smoothly. I think this temporary solution can be integrated into the project, which may help more people, because you have successfully helped me. ❤

[jiangmaniu]

lingui/js-lingui#1698 (comment) Thekip provided the current temporary implementation plan yesterday, and through my actual test, I found that it worked smoothly. I think this temporary solution can be integrated into the project, which may help more people, because you have successfully helped me. ❤

I have combined this plan with this project. If you are willing to add this plan, I will be happy to submit pr for this.