import Layout from "../components/layout/Layout"; // import Listing from "../components/listing/Listing"; import { getActivitiesByFilters } from "../redux/actions/activityAction"; import { getAllCategories, getSubCategoriesByCategoryId } from "../redux/actions/categoriesAction"; import { wrapper } from "../redux/store"; import dynamic from "next/dynamic"; const Listing = dynamic(() => import("../components/listing/Listing")); export default function ListingPage() { /** Client side rendering, traditional API call. */ // useEffect(() => { // dispatch(getActivitiesByFilters({ currentPage: router.query.page })); // }, []); return ( <Layout> <Listing /> </Layout> ); } /** For server side rendering */ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { try { console.log("query", query); await store.dispatch(getActivitiesByFilters({ currentPage: query.page })); await store.dispatch(getAllCategories()); await store.dispatch(getSubCategoriesByCategoryId()); // if (query.category) { // await store.dispatch(getActivitiesByFilters({ currentPage: query.page, category: query.category })); // } return { props: {} // Next.js will attempt to re-generate the page: // - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous. // - After the 10-second window, the next request will still show the cached (stale) page // - Next.js triggers a regeneration of the page in the background. // - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered. // In seconds // revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER) }; } catch (error) { console.log("index.js", error); } });