Struggling with properly loading data into state for my todo app has been quite the challenge.
In my todo app, I have a next.js page component located in pages/index.tsx. Here, I fetch data from my API using getServerSideProps and pass it to the component as a prop called tasksData.
The retrieval of tasksData is successful, and I can easily access it within my page component by destructuring the prop:
const Home = ({ tasksData }: Home) => { }Additionally, in my _app.tsx file, I have implemented a React Context provider named BoardProvider. This provider manages the state for my task board and utilizes useReducer() from the React Context API to update this state across context consumers like pages/index.tsx.
The main hurdle I'm facing is ensuring that the UI's primary source of truth is the state stored in my context provider (e.g.,
const { { tasks }, dispatch } = useBoard();tasksData prop).
One approach I've considered is fetching the data in getServerSideProps and then updating the state using a dispatched action within a useEffect hook:
useEffect(() => {
// Set the Context Provider state with data from the page props only on initial render.
dispatch({ type: TaskAction.SET_TASKS, payload: tasksData });
});
However, I've encountered issues with this method as sometimes tasksData ends up being undefined, presumably due to Next.js not yet making it available upon page mounting.
Another helpful suggestion I came across was to fetch the data and pass it as pageProps to my Context Provider in _app.tsx. This would involve utilizing getInitialProps() in _app.tsx to populate my provider's initial state with data from the API. However, this approach disables static optimization and other beneficial features.
If anyone could provide some pseudocode, documentation, or examples demonstrating how to effectively utilize getServerSideProps alongside the React Context API, it would be greatly appreciated!