Query menu with getInitialProps best practice?

Hi everyone,

I try the get familiar with Prismic and Nextjs and want to build a portfolio website with it. I would like to query the menu for the website and saw the best practice for doing so under the following URL:

https://prismic.io/docs/technologies/navbars-footers-menus-nextjs

The example shown uses getInitialProps for for querying the menu bar. However this will disable Automatic Static Optimization according to Nextjs, see here.
Is there a good and elegant alternative with getStaticProps or getServerSideProps?

Best regards,
Wendelin

Hi Wendelin,

Welcome to the community!

It depends on what you want to do here. The reason we do the menu with getInitialProps is that the menu will be queried once and used everywhere making for faster build times, it's not an isolated document like an about page or a home page.

If you want to use a menu with getStaticProps or getServerSideProps you will need to do that query on every page where it's used. So if you make a change to the menu you will need to update every page anyway, which goes against the use of Automatic Static Optimization.

My understanding is that you can still use getInitialProps for the menu and getStaticProps or getServerSideProps your pages like the about page or a home page. Then any changes to the about page or a home page will still be using Automatic Static Optimization when they are updated. I could be totally wrong here though.

When you website is deployed, does vercel need to know which pages are changed from the webhook to use Automatic Static Optimization? because currently our webhook only says there has been change and not what has changed.

Thanks.