.

components/home/BrowseExperiences.js

@@ -15,6 +15,7 @@ import { cleanImage } from "../../services/imageHandling.js";
 import { useRouter } from "next/router.js";
 import WishlistComponent from "../detail/WIshlistComponent.js";
 import { useSelector } from "react-redux";
+import Link from "next/link.js";
 const BrowseExperiences = ({ allActivitiesData }) => {
   const { endUser } = useSelector(state => state.endUser);
 
@@ -34,14 +35,16 @@ const BrowseExperiences = ({ allActivitiesData }) => {
                   </div>
                 </motion.div>
                 <div className="view-all-btn">
-                  <Button
-                    variant="primary"
-                    onClick={() => {
-                      router.push("/listing");
-                    }}
-                  >
-                    View All
-                  </Button>
+                  <Link href={"/listing"} prefetch={true}>
+                    <Button
+                      variant="primary"
+                      // onClick={() => {
+                      //   router.push("/listing");
+                      // }}
+                    >
+                      View All
+                    </Button>
+                  </Link>
                 </div>
               </div>
             </div>
@@ -115,14 +118,16 @@ const BrowseExperiences = ({ allActivitiesData }) => {
                                   <div className="">Includes taxes & Fees</div>
                                 </div>
                                 <div className="explore-now">
-                                  <Button
-                                    onClick={() => {
-                                      router.push(`/activities/${data.id}`);
-                                    }}
-                                    variant="primary"
-                                  >
-                                    Explore Now
-                                  </Button>
+                                  <Link href={`/activities/${data.id}`}>
+                                    <Button
+                                      // onClick={() => {
+                                      //   router.push(`/activities/${data.id}`);
+                                      // }}
+                                      variant="primary"
+                                    >
+                                      Explore Now
+                                    </Button>
+                                  </Link>
                                 </div>
                               </div>
                             </div>

components/home/Home.js

 import React, { Fragment, useEffect } from "react";
-import Banner from "./Banner";
-import SearchBar from "./SearchBar";
-import LetDiscover from "./LetDiscover";
-import BrowseExperiences from "./BrowseExperiences";
-import GiftAnExperience from "./GiftAnExperience";
-import Testimonial from "./Testimonial";
-import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform";
+// import Banner from "./Banner";
+// import SearchBar from "./SearchBar";
+// import LetDiscover from "./LetDiscover";
+// import BrowseExperiences from "./BrowseExperiences";
+// import GiftAnExperience from "./GiftAnExperience";
+// import Testimonial from "./Testimonial";
+// import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform";
 import { useDispatch, useSelector } from "react-redux";
+import dynamic from "next/dynamic";
+const Banner = dynamic(() => import("./Banner"));
+const SearchBar = dynamic(() => import("./SearchBar"));
+const LetDiscover = dynamic(() => import("./LetDiscover"));
+const BrowseExperiences = dynamic(() => import("./BrowseExperiences"));
+const GiftAnExperience = dynamic(() => import("./GiftAnExperience"));
+const Testimonial = dynamic(() => import("./Testimonial"));
+const SignUpToExperienceOurPlatform = dynamic(() => import("./SignUpToExperienceOurPlatform"));
 
 const Home = () => {
   const { categories } = useSelector(state => state.categories);

components/home/LetDiscover.js

@@ -33,7 +33,7 @@ const LetDiscover = ({ categories }) => {
                   </div>
                 </motion.div>
                 <div className="view-all-btn">
-                  <Link href={"/listing"} >
+                  <Link href={"/listing"} prefetch={true}>
                   <Button
                     // onClick={() => {
                     //   router.push("/listing");

components/listing/Listing.js

 import React, { Fragment, useEffect } from "react";
-import ListingInner from "./ListingInner";
-import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
-import LetDiscover from "./LetDiscover";
+// import ListingInner from "./ListingInner";
+// import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
+// import LetDiscover from "./LetDiscover";
 import { useSelector } from "react-redux";
+import dynamic from "next/dynamic";
+const LetDiscover = dynamic(() => import("./LetDiscover"));
+const ListingInner = dynamic(() => import("./ListingInner"));
+const SignUpToExperienceOurPlatform = dynamic(() => import("../home/SignUpToExperienceOurPlatform"));
 
 const Listing = () => {
   const { allActivitiesData, loading, totalCount } = useSelector(sate => sate.allActivitiesData);
   const { categories } = useSelector(sate => sate.categories);
   const { subCategories } = useSelector(sate => sate.subCategories);
 
-  
   console.log("allActivitiesData >>>> 123", allActivitiesData);
 
   return (
     <Fragment>
       <main>
-        <LetDiscover categories={categories} subCategories={subCategories}/>
+        <LetDiscover categories={categories} subCategories={subCategories} />
         <ListingInner allActivitiesData={allActivitiesData} loading={loading} totalCount={totalCount} />
         <SignUpToExperienceOurPlatform />
       </main>

pages/index.js

@@ -7,6 +7,7 @@ import { getTestimonial } from "../redux/actions/testimonialAction";
 import { loadUser } from "../redux/actions/userActions";
 import { wrapper } from "../redux/store";
 
+
 export default function IndexPage() {
   /** Client side rendering, traditional API call. */
   // const dispatch = useDispatch();

pages/listing.js

-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
 import Layout from "../components/layout/Layout";
-import Listing from "../components/listing/Listing";
+// import Listing from "../components/listing/Listing";
 import { getActivitiesByFilters } from "../redux/actions/activityAction";
-import { getAllCategories, getAllSubCategories, getSubCategoriesByCategoryId } from "../redux/actions/categoriesAction";
+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. */
-  const router = useRouter();
-  const dispatch = useDispatch();
   // useEffect(() => {
   //   dispatch(getActivitiesByFilters({ currentPage: router.query.page }));
   // }, []);