I'm looking forward to create a web app with NextJS and Google's Firebase. The app has an admin panel and a public site. In the admin panel should have options to edit the public site's navigation.
So I was thinking is it wise to have client-side fetching navigation data on each refresh or is there a better way to get dynamic and up-to date navigation data with as little API request as possible?
This really depends on your use case. In Next.js there are 3 diffrent types for data fetching.
This fetches the data and renders the pages on build time. This is greate for Pages that don't change to often. Like a blog for example.
This fetches the data and renders the pages on each request from a user. This is usefull for data that changes quickly and has to be up to date.
This allows for a compromise between the 2 types i described above and might be what your looking for if you want to use as little API requests as possiblie. With it you can staticly regenerate the page at a certain time interval.
export async function getStaticProps(){
//fetch data from firebase ...
return {
props: { data },
revalidate: 60,
}
}