Projects file structure looks like this:
components
├─homepage
│ ├─index.jsx
├─location
│ ├─index.jsx
pages
│ ├─location
│ │ ├─[id].jsx
│ ├─presentation
│ │ ├─[id].jsx
│ ├─_app.jsx
│ ├─index.jsx
functions
├─dataFetch.js
pages/index.jsx has getInitialProps() with data fetching function within. I need to share api fetch result data to pages/location/[id].jsx and pages/presentation/[id].jsx.
My solution to this problem was to start using redux (which I will need not only for this case). However, it makes a problem with pages rendering props on first load of the website.
For example, if I go to http://localhost:3000 - it will work just fine, as data is fetched in pages/index.jsx.
But if I go to http://localhost:3000/location/12345 - there will be no fetched data, because I don't call getInitialProps() on that page.
Is my way to resolving this problem using redux is correct? And if so, where exactly should I fetch data?