Next 9.4 Global Data Fetching

[wityan]

I have an application which gets its Navigation from and API Endpoint. This Navigation is visible on every page. What do you think is the best way to fetch this navigation from the API. Currently I have it in the _app in the getInitialProps but this is not the best option I think! Any suggestions?

[ItsWendell]

There's multiple ways you can tackle this, but generally, anywhere before you actually render your page. So somewhere in your _app is the most useful, since that data will be available across pages once you start navigating.

If you don't need your navigation data from the API to be available during runtime (if getting this information during build-time is enough), you should consider using getStaticProps.

Even more wonderful is getStaticPaths, which allows you to statically generate your entire website at build-time based on that API. This is only useful though if that information is available at build-time and doesn't need to change until you build again, then again, if it only sometimes changes on some pages, you can consider using Incremental Builds.

If you need your navigation data from that API endpoint to be available with server-side rending, you should consider: getServerSideProps instead of getInitialProps. getInitialProps might run twice on front-end and back-end and if you only need it for SSR, use getServerSideProps, down-side is that you'll lose static optimalisation using this in _app.

I recommend properly reading the Data Fetching docs before you make a decision!

[wityan]

Yes the only problem is that getStaticProps and getStaticPaths isn't working on the _app page or am I wrong?

[ItsWendell]

Ah correct, then using getInitialProps for fetching the navigation might be necessary, you can also consider using the experimental optional catch all dynamic routes, NextJS uses this actively on in their documentation website source code.

Can you tell us a bit more about your use-case, what are you trying to build here?

[wityan]

We are building an gaming Plattform where we use authentication with auth0 and a headless cms as navigation and static content provider.

[ItsWendell]

Hmh yes interesting! Most CMS examples with NextJS are often based around blog posts, and not really navigation. I think in this case I would suggest using the experimental catch all dynamic routes on your index page, in combination with Incremental Static Generation using GetStaticProps and GetStaticPaths and the revalidate flag.

Doing this you might be able to catch all routes in a single page, you can get the right navigation properties in GetStaticProps and revalidate very x seconds. (wouldn't recommend setting this too low). Then you can statically generate specific paths with GetStaticPaths that you determine on build-time (by doing a call to your CMS), if you use the fallback: true property it will generate a static file for you in the background for that specific page if it's not listed at build-time. I'm also only recently learning about this stuff, but it's pretty interesting!

[wityan]

Yes of course those two combined are awesome. I already used them for two sites.

[maqi1520]

[email protected] version, other pages use getServerSideProps, but _.app.js does not support getServerSideProps, usegetInitialProps？