Multilingual website
🟨 Slightly different to Blazor Server
If you're looking to expand your website's reach and cater to an international audience, creating a multilingual website is an excellent strategy. In this tutorial, we'll guide you through the process of building a Blazor application that can support multiple languages.
- How multilingual works in Blazor WebAssembly?
- Key considerations when creating a multilingual website.
- Language selection strategies.
- Translation approaches.
- Resource loading approaches.
- Key differences between Blazor WebAssembly and Blazor Server.
You can download the example code used in this topic on GitHub.
How multilingual works in Blazor WebAssembly?
Multilingual works can be achieved in four steps:
- Identifying the language associated with the region: Since a country may have multiple languages, Blazor WebAssembly uses
CultureInfo.DefaultThreadCurrentCultureandCultureInfo.DefaultThreadCurrentUICultureto determine the current region. Here is an example language tag, en-US: The en indicates that the language is English, and the US indicates that the language is used in America. You can find a list of language tags on Microsoft Learn. Although it is a rare case, you may need to create your own language and location, but that part is not included in this tutorial. - Locating the corresponding resource file using a key: Resource files can be in various formats such as .resx, .json, .yml, etc. and their structure may differ as well. Translated keys may be nested, such as
Index.HelloWorldor a flat format likeHelloWorldor even spread across multiple files. - Using parameters in addition to the key to translate the text: For example, in Chinese, the 31st day is "日31," while in English, it is "31st."
- Displaying the translated text.
Key considerations when creating a multilingual website
The most important thing to keep in mind when creating a multilingual website are:
- Language selection strategy.
- Translation approach.
Language selection strategies
When creating a multilingual website, developers can use different methods to determine the user's preferred language, such as cookies, browser language, local storage, or the language in the URL. For example, if a user in France visits a website with their browser language set to French, the website can detect this and display the website content in French by default.
However, conflicts may arise when these methods produce different results for the user's preferred language. For instance, if a user's browser language is set to French, but they have previously selected English as their preferred language in the website's settings, there may be a conflict between the two methods.
To resolve such conflicts, developers can prioritize one method over others based on factors such as the reliability of the data source and the user's past language selection history. For instance, if the user has consistently chosen English as their preferred language in the website's settings, the website can prioritize that selection over their browser language.
Translation approaches
There are 2 approaches to translation in Blazor:
- Deferred translation: When a user selects a language, the website saves it as a preference and remembers it for future visits. However, the language selection may not take effect until the user refreshes the website.
- Instant translation: With instant translation, when a user selects a language, Blazor immediately updates and renders the web page in the selected language without requiring the user to refresh the website.
Resource loading approaches
Resource loading strategies are an essential aspect of translation in Blazor. Resources typically contain collections of keys and values for a specific language, and a website with multiple languages and components will require multiple resource files to be loaded. There are 2 resource loading approaches for Blazor WebAssembly:
- Eager loading (not recommended): This strategy involves loading all resource files (.resx files) at the initial load of the website. However, if a user requests only one component, all 40 resource files will still be loaded. This strategy is not recommended due to the significant overhead and can be used with any translation approach.
- Lazy loading (recommended): This strategy loads only the requested resource files, and the loaded files are cached in the browser memory. Thus, if a user changes the language, the resource files don't need to be loaded again. Resource files can have different extensions like .json and .yml or any other file formats. For example, if a website has 10 components in 3 languages and a user requests 1 component, only 1 resource file will be loaded. This strategy is recommended and can only be used with the Instant Translation approach.
Key differences between Blazor WebAssembly and Blazor Server
When working with Blazor Server, you'll need to use CultureInfo.CurrentCulture and CultureInfo.CurrentUICulture, rather than CultureInfo.DefaultThreadCurrentCulture and CultureInfo.DefaultThreadCurrentUICulture as you would with Blazor WebAssembly. Additionally, the project preparation steps are completely different.
