Navigation items: hardcoded vs fetch vs inject during build


Hello everyone,

I am not totally sure what is best practise with the following case (which is a pretty general one).
Strangely I did not really find any articles on this topic googeling :thinking: (Maybe wrong keywords…)

I’m currently working on a Vue app, that is used as a frontend for multiple web apps.
Therfore several navigation items can change from app to app.

  1. Currently the navigation items are fetched from the server (ASP.NET), which results in a little bit longer loading time on initial load.
  2. Performance wise it is quicker and somehow more robust to hardcode the navigtion, but with much higher maintenance costs, so I do not like this approach.
  3. Another option would be to somehow inject the navigaion items into the vuex store during the build process, meaning: running the build process generates a new store module with the navigation items in it.

So the third option would be the best option regarding maintenance and loading time?
Am I missing something?

How do you approach this case?

Thankful for your input, thoughts and any releated articles/books on this!