Would it be better if I have multiple useTranslations()?

[RaenonX]

If I have the message file as below:

{
  "A": {
    "B": {
      "C": "D",
      "E": "F"
    },
    "G": {
      "H": "I",
      "J": "K"
    },
    ...
  }
}

And I want to use A.B.C and A.G.H, what's the better approach in terms of data transmitted and performance?

1

const t = useTranslations('A');

t('B.C');
t('G.H');

2

const t = useTranslations('A.B');
const t2 = useTranslations('A.G');

t('C');
t2('H');

---

My assumption is that useTranslations() could possibly grab whatever given as the argument (A.B, A.G) in 2, so if I have A.S, A.Z and so on, 1 wil still transmit the aforementioned, but 2 won't.

[amannn]

Interesting question! So at this point, there's no practical difference in terms of performance between the two approaches you've illustrated. However, there's this idea that we could automatically tree-shake messages (see #1). This is less relevant in Server Components, but on the client side we could benefit from this. Since you're using the same messages in both examples, the required messages would be the same though.

So long story short, approach number 1 is definitely what I'd recommend since it has better ergonomics!

Btw. I've opened #411 to discuss how different developers structure their messages, would be curious about your perspective!

[RaenonX]

Thanks for responding! Would be great if #1 is in! Unfortunately #1 went deep to a territory I am not familiar with, so I can't comment much. Not sure what did you mean by less less relevant in Server Components, but on the client side, but what I'd like to see is that the messages sending over to the client is tree-shaked i.e. less data transferred.

So using the example above, approach 1 sends the whole messages, while approach 2 sends A.B.C, A.B.E only.