Next.js: Reduce data fetching and share data between pages
O'right! I found this thread while I was looking for something else. But since I had to work on similar issues, I can give you some directions, and I will do my best to make it clear for you.
So there are some data which you want to have it share, across your app (pages/components).
- Next.js uses the App component to initialize pages. You can override it and control the page initialization. to achieve that simply create
_app.js
file in root ofpages
directory. For more information follow this link: https://nextjs.org/docs/advanced-features/custom-app - Just like the way you can use
getInitialProps
in your pages to fetch data from your API, you can also use the same method in_app.js
. So, I would fetch those data which I need to share them across my app and eliminate my API calls.
Well, Now I can think of two ways to share the data across my app
- Using of
createContext
hooks.
1.1. Create a DataContext using createContext hooks. and wrap <Component {...pageProps} />
with your <DataContext.Provider>
.Here is a code snippet to give you a better clue:
<DataContext.Provider value={{ userData, footerData, etc... }}> <Component {...pageProps} /></DataContext.Provider>
1.2. Now in other pages/components you can access to your DataContext like following:
const { footerData } = useContext(DataContext);
And then you are able to do the manipulation in your front-end
- populates
props
usinggetInitialProps
2.1. getInitialProps
is used to asynchronously fetch some data, which then populates props
. that would be the same case in _app.js
.
The code in your _app.js
would be something like this:
function MyApp({ Component, pageProps, footerData }) { //do other stuffs return ( <Component {...pageProps} footerData={footerData} /> ;}MyApp.getInitialProps = async ({ Component, ctx }) => { const footerRes = await fetch('http://API_URL'); const footerData = await footerRes.json(); let pageProps = {}; if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx); } return { pageProps, footerData };};
2.2. Now in your pages (not in your components) you can access to props including those you have shared from _app.js
and you can start to do you manipulation.
Hope I could give you a clue and direction. Have fun exploring.