Musings by Mito

When you’re working with a multisite setup in Sitecore, you’ll often need to share data between sites. One of the most common things to share? Dictionary data. There are a bunch of ways to set this up, and of course, each project does it a little differently.

In a recent project, all of our sites lived under a single tenant, so we created a Global site to hold anything that’s shared — components, dictionary entries, you name it. We marked this as our “shared site.” (Side note: Sitecore Helix recommends this approach if you’ve got a unified governance model and technical architecture across your sites.)

But after hooking everything up, we ran into a problem: dictionary entries from the Global site weren’t showing up in the Experience Editor or in the rendering host. After some digging, we realized that the dictionary service calls in preview-mode.ts and normal-mode.ts didn’t know about our shared site.

Here’s what the original code looked like:

// Fetch dictionary data if layout data was present
if (!props.notFound) {      
  const dictionaryService = this.getDictionaryService(props.site.name);
  props.dictionary = await dictionaryService.fetchDictionaryData(props.locale);
}

Pretty straightforward—but it only grabs dictionary entries from the current site.

To fix this, we updated both files to also fetch dictionary data from the Global site and then merged the two:

// Fetch dictionary data if layout data was present
if (!props.notFound) {
  const globalDictionaryService = this.getDictionaryService('Global');
  const globalDictionary = await globalDictionaryService.fetchDictionaryData(props.locale);

  const dictionaryService = this.getDictionaryService(props.site.name);
  const dictionary = await dictionaryService.fetchDictionaryData(props.locale);

  const combinedDictionary = await Promise.all([globalDictionary, dictionary]).then(function (a) {
    return a.reduce((p, c) => {
      return { ...p, ...c };
     }, Promise.resolve({} as DictionaryPhrases));
  });

  props.dictionary = combinedDictionary;
}

Not the most elegant solution, hardcoding the “Global” site name, but since our architecture (single tenant, multiple sites) isn’t changing anytime soon, we were okay with it.

Also, worth mentioning: this was done using JSS (Next.js) version 21.6.4. So if you’re using a newer version, the DictionaryService behavior might be different — though as of this writing, version 22.6.0 still looks pretty much the same.