SSR and app language selection

In our app we support multiple languages, such as English, German, French etc. It is straightforward without SSR: in the browser navigator.language can be used to preselect the app’s language matching the visitor’s (fallback is English).

At first sight language selection seems similarly easy on the server (in SSR): the request header Accept-Language reveals just about the same information.

We use tap-i18n, and setting the language there is a client-only function: it makes sense, the browser normally belongs to a single user. All we can do on the server is to save the determined language code in a variable, and use it every time during SSR when messages need to be translated subsequently.

Here’s where the problems begin.

The server is shared among visitors, so to say, and that’s the case even during SSR. Even if node.js single threaded, during an SSR run the code will “stop” in fibers e.h. while accessing MongoDB. In this moment another user with another language preference can connect, while the first SSR run is still incomplete in onPageLoad / sink.renderIntoElementById() etc.

If the second user’s language is different from the first one, the variable would be overwritten, so it could happen, that the html still being rendered for the first user will be in mixed languages.

Again at first sight the solution seems easy: let’s forget the language preselection while in SSR, let’s just use English for all users, no matter their language. The result would be that once the app on the client gets finally hydrated, it would rerender the page with the user’s actual language, i.e. the page would first appear in English, and then in 1-3 seconds it would change to another language. I think that would look really awkward. :frowning:

What would be an appropriate solution to this problem?

1 Like