Shared data between all pages (static)

[vasil-sarandev]

Hey, guys. I'm learning NEXT and to do that I'm building a blog.
To give you context of what I'm trying to achieve - Each Blog Post page would have a recent posts tab.
I want to pull the 5 most recent posts once at build time and share that data between my post pages.
Here's what I tried unsuccessfully until now:

1. Top level Context.Provider in the _app.js file that fetches the data on ComponentDidMount and pages get it as a Context.Consumer - runs each time a new page is accessed.
2. getInitialProps in the _app.js file - doesn't work, runs each time a page is requested. I feel like getStaticProps would work but seems like it's not compatible with _app.js.

Can any of you guys give me a suggestion on how I could achieve what I'm trying to do?

[francisrod01]

I'm using option 1 and it runs well.
I think you're missing something about React passing data through ContextAPI.
Could you pass more details about option 1 implementation?

[vasil-sarandev]

Hey! Thank you for your response. So in my _app.js file I had something like
const App = ({ Component, pageProps }) => { return ( <BlogsContextProvider> <Component {...pageProps} /> </BlogsContextProvider> ) }

My BlogsContextProvider did the API call on ComponentDidMount and it was called each time a new page is accessed. I wanted to only have it called once on build time. Am I missing something here? Let me know if I can provide more details. Thanks!

[revskill10]

I think you can cache those data to localStorage.

[francisrod01]

Hi @srndvv, you can consider this as a help.
https://vercel.com/docs/v2/edge-network/caching#cacheable-responses