[Docs]: useTranslations() vs getTranslations() for server contexts?

[j0nas]

Link to page

https://next-intl-docs.vercel.app/docs/environments/server-client-components#async-components

Describe the problem

Hi @amannn! First of all, thank you so much for a great library! I was following #149 for a while and it was so cool to see you be so responsive and helpful with everyone. When 3.0 dropped, I started integrating next-intl into the app I'm building and it's been working like a charm so far! 😍 All this to say, thank you so much for all your hard work, it does not go by unnoticed!

Now, my question pertains to the difference between next-intl/server's getTranslations vs. next-intl's useTranslations in a server context. I've generally been using async components and await getTranslations, but noticed that I'd accidentally used useTranslations in some components and couldn't tell any difference in terms of outcome. The docs also start of by showing an example using the useTranslations hook, but then also show a getTranslations-based example with an async component. There is also a section that helpfully explains the difference, so maybe it's just me being slow and wanting to be sure: can I use useTranslations with no performance penalty in server contexts, or should I prefer to await getTranslations with async components in such cases? Is there a difference?

I would prefer to useTranslations because then I wouldn't have to convert all my components to async components, and also because getTranslations doesn't get picked up by the i18n ally plugin (thank you for mentioning that plugin in the docs!), but if await getTranslations is more performant somehow then that'll obviously be the way to go for me.

[amannn]

Thank you so much for the kind words @j0nas, I really appreciate it! ❤️

Also, great question! While replying here I actually noticed that there was an optimization missing that resulted in hooks unnecessarily suspending. I've fixed this in #741 and now the answer really is that the two can be used interchangeably :).

I've also added some details to the "Should I use async or non-async functions for my components?" expandable section in the Non-async components docs. Have a look and let me know if this sufficiently answers your questions!

getTranslations doesn't get picked up by the i18n ally plugin

Yep, currently waiting for lokalise/i18n-ally#1048 to get merged 🙏

[j0nas]

That response time is incredible, @amannn! 🤩

[…] and now the answer really is that the two can be used interchangeably

Thank you for clarifying. The docs added in #741 help in this regard, but for someone looking for a black-and-white answer, reading "it's essentially the same" hits the spot. 🎯 (Maaaaybe worth adding that one sentence to the docs as well, to be super explicit? 😄) So I'll stick to useTranslations() unless in a non-component context. 👍

Again, I appreciate this all a lot, thank you!