Should I Store Menu Data in Database or Hardcode in Frontend for Better Manageability and User Authorization?

I'm developing an application using Next.js for the frontend and ASP.NET Core for the backend. The application has a large menu structure, and I need to implement role-based access control so that different users see different menu items based on their permissions.

I'm trying to decide the best approach to manage this menu data in terms of both performance and maintainability:

Store the menu structure in the frontend (hardcoded data), which might simplify the frontend code but may become challenging as the menu grows and user permissions need updates.

Store the menu in a database, which could provide more flexibility for changes and permissions, as well as easy updates across different user roles. But it may add complexity, and I’m concerned about the performance impact of querying the database for menu data every time a user logs in.

Here are my main considerations:

Ease of updating the menu structure as requirements change. Performance impacts of fetching the menu structure from the database. Ease of managing user permissions based on roles. What are the best practices in this situation? Should I store the menu data in the database or hardcode it in the frontend for optimal manageability and scalability?

Any advice or guidance would be greatly appreciated. Thanks!

My idea is that we could bind menu to roles and store the menus in database as I worked on a portal project which also took this solution. Some of the menus are hardcoded in frontend such as Home Page, Dashboard, and those menus are available for all users even if there's no account signed in so that we could add menus into Nav Bar for different users dynamically.

In my humble opinion, no matter which way we choose to use, the database is required to store users, roles, menus, user-role and role-menu. Then the app could dynamically show different menus for different users based on their role. And the biggest difference between the 2 approaches(hard code menus in frontend app or dynamically add menus) is whether we want the frontend app to do "hide" operation or "add menu" operation. "Add" operation only need to have a foreach loop to generate menu tree and add them in Menu Nav Bar, but "hide" operation requires to control the "IsHidden" attribute for all the menus and it will bring much trouble for long-time management.

Assuming one day we need to add/update a menu and its relationship with role, if we add menus dynamically, we just need to change the data stored in database, no need to change the frontend. But if we hard code in frontend, we need to change the database and then change the "IsHidden" logic in frontend too.

Both of the 2 approaches require a login request for user sign in, and the response should contain user information and menu information. Hard code menus requires a list of Boolean result for menus, while Adding-Menu requires to contain the menu url which is used for creating <a href="url">menu name</a> and the parent-child menu relationship if you want to show sub menu at the same time. More data in the response means more cost in data transfer and more time for querying from the database but it won't degrade performance seriously.