CODEWITHSUNDEEP
reactjsnext.jsserver-side-rendering
Junior Miranda
Junior Miranda

Reputation: 41

Best practices for load basic site data in Next.js from external API

Let's say I have a blog made in Next.js by consuming a REST API from a headless CMS. I know how to load posts and so on. But where do I load the basic website info such as name and color? I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it? Thanks.

Upvotes: 2

Views: 545

Answers (1)

Ramakay
Ramakay

Reputation: 3135

I think there are multiple questions here

But where do I load the basic website info such as name and color?

I am interpreting the question so you may want to add more details to complete the answer. You have two options when using data that is truly static in nature.

  1. You can use the post mechanism to create a website info that you can load as a specific call
  2. You can store the static information in a separate file in the server and read it off and update the data via a git update which will reflect on the site. If this won't change often, e.g: a website name - You can use getStaticProps to get this information at build time

I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it?

Page data that is truly global can be fetched via _app.js + getStaticProps seems to be a long running open issue - You can follow the thread here and one potential workaround here - https://github.com/vercel/next.js/discussions/10949#discussioncomment-6148

Upvotes: 1

Related Questions