Disable dictionary service call in get starter JSS/react template

Question

I am using the Getting Started template, and I can see the dictionary call is initiated by default.

How to disable this call?

Answer 1

Below answer for react get starter template!

Disable it from the client-side template

We can disable the client-side template dictionary service call from the below file.

Go to this file => \src\index.js

Comment as like below!

/*
  App Rendering
*/
// initialize the dictionary, then render the app
// note: if not making a multlingual app, the dictionary init can be removed.
// i18ninit(initLanguage).then(() => {
// HTML element to place the app into
const rootElement = document.getElementById('root');
 
renderFunction(
  rootElement,
  <AppRoot
    path={window.location.pathname}
    Router={BrowserRouter}
    graphQLClient={graphQLClient}
    ssrState={__JSS_STATE__}
  />
);
// });

Now you can check refreshing the page, dictionary service calls will not initiate.

Disable it from the SSR(node-js-headless-proxy) template

If you are using server-side rendering(node-js-headless-proxy), Then you have to disable it from the SSR template as well.

Go to this file => \src\ssr-proxy\src\config.ts

Comment as like below & give an empty return statement like this.

Note: This will not affect your multilingual language calls. No need to worry.

return {};
    //Disabled the dictionary call 
    // return dictionaryService.fetchDictionaryData(language).then((phrases) => {
    //   const viewBag = {
    //     dictionary: phrases,
    //   };
 
    //   return viewBag;
    // });

Now you can check the final hosted version of our website. Dictionary calls will be completely disabled. At the same time, you can consume layout services per language context!

Answer 2

Just try to locate DictionaryServiceFactory in your code. It is where your front end app will fetch dictionary. Then it is being used in different modes like Normal mode plugin (search for NormalModePlugin). Here you can disable dictionary service call to stop it from executing.

constructor() {
// comment below line
    this.dictionaryServices = new Map<string, DictionaryService>();
    this.layoutServices = new Map<string, LayoutService>();
  }

and

// comment below lines in exec method
const dictionaryService = this.getDictionaryService(props.site.name);
    props.dictionary = await dictionaryService.fetchDictionaryData(props.locale);

This will disable dictionary service call.

Note: This code is from NextJs app and not React. But I anticipate similar naming convention in React as well.