Why do I have to set pages in i18n.js if I still have to reference them in useTranslation()?

[teodoro-mentora]

Hi!
I didn't really understand the use of the "pages" attribute in the i18n.js config file.
I though that by specifying the pages there, I wouldn't have to explicitly set the namespace when calling const {t} = useTranslation(). But I have to.
So what is the real purpose of that config? Optimization?

[fs-innonova]

Thats a very good question, I was about to ask the same!

And also, whats the purpose of the namespaces? it should be to "lazy load" translation files on request no? for instance I tried to have:

pages: {
  '*': ['common'],
  '/user': ['user']
}

I thought in this case that if I go to / then only common "file" is downloaded and only if I go to /user/* I request the user namespace.. but this does not work like that. Can someone please explain? Ty

[aralroca]

It's made with performance in mind.

It's not the same that each page has to download a JSON with all the translations (and parse them), that each page only loads the translations that it consumes.

pages: {
  '*': ['common'],
  '/user': ['user']
}

I thought in this case that if I go to / then only common "file" is downloaded and only if I go to /user/* I request the user namespace.. but this does not work like that. Can someone please explain? Ty

This is because in the definition common namespace is download in all pages, and user namespace in /user page. So the /user page it downloads common and user namespaces. On the other hand, other pages only the common namespace.

The common namespace is useful to put common translations for all pages, such as header, footer, etc.