Global shared components

Shared components are useful if you have a component that is (eg. header or footer) shared between pages.

Here is a useful guide to better understand their purpose:

https://www.storyblok.com/tp/global-components-references (opens in a new tab)

How it works

Shared components can be loaded into a page via a _uid reference from storyblok. You can have a single or multi option field that picks up your custom shared components like so:

Global component

This will return the uid in the data:

{
  "_uid": "a19e0e66-4ac9-475b-8256-9b594238a3e5",
  "component": "global_reference",
  "reference": "797154fd-2c40-4146-81a6-dfe65b99de98"
}

In order to get the data from this shared component, we have to use resolve_relations. This will return the entire shared component data.

https://api.storyblok.com/v2/cdn/stories/home?
version=published&
token={YOUR_ACESS_TOKEN}&
cv= 1678438739&
resolve_relations=global_reference.reference

Data will then look like this on build:

{
  "rels": [
    {
      "name": "Newsletter Section",
      "uuid": "797154fd-2c40-4146-81a6-dfe65b99de98",
      "content": {
        "_uid": "bd110835-d716-462a-b3f4-97d883c8f3d6",
        "global": [
          {
            "_uid": "0596bc27-ccee-4827-a81b-4fbac572e6a0",
            "Image": {
              "id": 7455384,
              "filename": "https://a.storyblok.com/f/204814/2880x1680/1d01157973/storyblok_v2_create_new_story.png"
            },
            "Headline": "Let's stay in touch!",
            "component": "newsletter-section",
            "Subheadline": "We won't spam – promise!"
          }
        ],
        "component": "global"
      },
      "slug": "newsletter-section"
    }
  ]
}

How it affects workflow?

If we update a shared component, it won’t update on all pages automatically if you are using SSG.

To update on all pages, either revalidate pages in nextjs or rebuild the site to see the updated content.

With ISR it will be kept updated with automated cache invalidation so you don’t have to rebuild the entire site.

Translations and global components

We can not only add translations to each global component, we can also translate the component that consumes the references on single/multi options.

Translate global component fields

Global component fields themselves can be translated and will be resolved correctly with the correct language.

Default language global component field translation

Different language global component field translation

en-us language global component field translation

Translate the global component consumer

You can also translate the consumer and choose between different global components depending on language.

Default language global component selection

en-us language different global component selection

It works really well with these 2 layers of translation.

GitHub Actions Pure Ssg Export