Please need Help!! How to correctly use getInitialProps and useEffect simultaneously?

[anubhavseal]

I have a listing page of Products that I intend to server render. So using NextJs's getInitialProps I fetch the list of Products and pass it on to the components and it works. There is a requirement, whenever a city changes(from Dropdown) in client-side, I need to refetch the updated list from the server, So I have this API call in a useEffect. This is somewhat the idea.

ProductsWrapper.getInitialProps = async () => {
 // fetch list of Products
 const products = await getProducts();
 // update the redux store with products returned from server
 return {products};
}

// Products is a redux connected component that listens for Product and City state updates
function Products({products, city}) {

 // fetch new Products iff city changes
 useEffect( async () => {
   const products = await getProducts();
    // update the redux store with products returned from server
 }, [city])
}

The problem is at step 3 below,

1. At the server Products API call is made and fed to Redux.
2. The Page is built at the server-side and sent over to the client.
3. At the Client, useEffect runs and unnecessarily calls the API endpoint again.

How do I Prevent this redundant call, the first time when the page is rendered on the client?

Well, just an if check inside useEffect whether data is present before making the api call doesn't work, because despite Products data being present in Redux store, if the city changes, the api call has to be made.

[anubhavseal]

@illuminist Can you please help me out with this?

[illuminist]

You can add another state for redux to indicate the initial props readiness. I will call it initialDataReadied: boolean in this case.

When fetching data in getInitialProps, dispatch another action to mark initialDataReadied to be true as the data has been fetched in getInitialProps.

Then, connect that state to the component, connect initialDataReadied to the component, add it to useEffect's dependencies, and add condition to skip the effect when initialDataReadied is true and city is nothing.

You may need to distinguish the different between initial city, cleared city filter too.