Official string localization tree shaking

[benjick]

Goals

1. Provide a unified way of rendering localizations in both server components and client components
2. Provide a way to only request needed string localizations from a remote host (cms, database)

Non-Goals

No response

Background

I wanna talk about the need for an official string localization "mechanism" for Next.js

First of all, I think my situation is a pretty common one:

1. We have a webapp with multiple languages
2. We update our localized strings in a CMS

With Next.js app router this brings two issues

1. Can't use the same <Translation-component for both server and client components, unless you opt to always use a client component
2. Can't automatically know which strings are needed on which pages for context, meaning you have to either a) handpick which IDs to send or b) send every string on every hard page load

With that said, a common complaint about Next.js is how it's missing essential tools, like no official auth, ORM, etc. I disagree, I think the community can fill most gaps better than an official solution for every single thing would do. However, in this case the community has been unable to solve this issue of tree-shaking messages for years, see this next-intl issue: amannn/next-intl#1, and it doesn't seem to be for the lack of trying.

Proposal

I think the Next.js team should provide us with some official tools to overcome at least the second issue of tree-shaking messages. I'm not knowledgeable enough to suggest a technical preference for a solution, but I do think this is an important issue that needs solving.