Skip to content

perf(Navigation): Request nav/footer data only once during BE build

What is changing in this MR?

This implementation requests the navigation/footer data only once and then cache it to be used during the build of the application to avoid hitting the Contentul API many times only to get the same data.

  • Update the navigation-hoc and footer-hoc components to receive the data from Nuxt Payload, if for some reason the payload does not exists, it will fetch the data from Contentful
  • Create the getAllLocalesNavData that fetches all locales by using withAllLocales and create a recursive function that selects the necessary language from the object return from Contentful by doing one request per language and then grouping the results by locale.
  • Call the getAllLocalesNavData and cache the result using Nuxt Payload to have a single navigation instance for the whole build.

Considerations

  • For development builds (aka yarn dev) the data will be fetched from Contentful right away, for production builds (aka yarn generate) it will use this approach
  • Even though this approach works for most pages, pages such as community, devsecops, or pricing are not using the payload as for some reason it is not detected on these pages, that would be a nice fix for an mvc2 version of this work.
Production Review app
https://about.gitlab.com/ https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/

The pages below are not using the cached NavigationData for some reason, which means the NavigationData for these pages is being taken by the fallback function.

Production Review app
https://about.gitlab.com/404 https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/404
https://about.gitlab.com/custom-page-preview https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/custom-page-preview
https://about.gitlab.com/events-page-preview https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/events-page-preview
https://about.gitlab.com/search https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/search
https://about.gitlab.com/de-de/impressum https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/de-de/impressum
https://about.gitlab.com/fr-fr/mentions-legales https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/fr-fr/mentions-legales
https://about.gitlab.com/diversity-inclusion-belonging https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/diversity-inclusion-belonging
https://about.gitlab.com/ja-jp/sales https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/ja-jp/sales
https://about.gitlab.com/events/devsecops-world-tour https://3626-request-nav-footer-data-only-once-during-be-build.about.gitlab-review.app/events/devsecops-world-tour

Build Variables:

  • Use Contentful Preview API

Closes #3626 (closed)

Edited by John Arias Castillo

Merge request reports