Summary

Building a localized website with Blazor Server is really inconvenient at the moment. I've consulted the documentation, tried multiple approaches but Blazor just doesn't seem to make it convenient.

Motivation and goals

For SEO purposes it is recommended to have the language either as an URL segment or query parameter. I prefer using a lang query parameter which needs to be monitored, and the culture updated accordingly.

Here is an example angular app with the approach I'm currently using in other angular apps.

Breakdown

In the AppComponent the query parameter is monitored and changes the language of the entire application:

constructor(private route: ActivatedRoute, private translateService: TranslateService) {
  const defaultLang = 'en';
  this.route.queryParams.subscribe((params) => {
    const lang = params['lang'];
    if (!!lang) {
      this.translateService.use(lang);
    } else {
      this.translateService.use(defaultLang);
    }
  });
}

At the client-side the TranslateModule services are provided through the following module import:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
    deps: [ HttpClient ]
  }
}),

During SSR the TranslateModule services are provided through the following module import in the app.browser.module.ts:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: () => new TranslateJsonLoader()
  }
})

With the TranslateJsonLoader like this:

import { TranslateLoader } from '@ngx-translate/core';
import { of } from 'rxjs';
import * as translationEn from '../../assets/i18n/en.json';
import * as translationNl from '../../assets/i18n/nl.json';

export class TranslateJsonLoader implements TranslateLoader {
  constructor() {
  }

  public getTranslation(lang: string) {
    switch (lang) {
      case 'nl':
        return of(translationNl);
      default:
        return of(translationEn);
    }
  }
}

Now you can simply use the TranslatePipe on any component like a charm:

{{ 'message' | translate }}

I'd expect something similarily simple to be possible in Blazor Server.

• Define your resx files with your translations
• Use @translateService.Translate("message") in your razor views
• Change the language using @onclick="@translateService.SetLocale("en-EN")"
• No dependency on a cookie to select the language, but have the language passed through the url

In scope

1. How to specify your translations => most likely through resx files
2. Exposure of the language to the application
   a) Due to SEO considerations, the language should be present in the URL by preference
   b) Most likely some other developers would rather like to have the language in a cookie
3. How to change the language
   a) Could be through a TranslateService
   b) I myself just use router.navigate([], { queryParams: { lang: 'en-EN' } });