React Js, Next Js Technology Upgradation (R&D)

The project uses a Server-Side Prefetching strategy with TanStack Query (React Query) to load deal data.

Page Level (page.tsx): Data is fetched on the server side using unique actions for each deal type.
State Management: The fetched data is passed to the client via QueryClient hydration or initial props.
UI Components: Client-side components (*Section.tsx) consume this data using useQuery and render responsive carousels.
1. Flights Implementation
Service: fetchFlightDeals in src/services/flight-service.ts
Endpoint: POST /api/FlightService/FlightDeal
Payload: { currency, isElastic: false, DealGroup: "1" }
Action: getFlightDealsAction calls the service.
Component: FlightDealsSection.tsx
Uses useQuery({ queryKey: ["flight-deals"] }).
Displays items using FlightDealItem.
2. Hotels Implementation
Service: fetchHotelDeals in src/services/hotel-service.ts
Endpoint: POST /api/HotelService/HotelDeal
Payload: { currency, isElastic: false, DealGroup: "2" }
Action: getHotelDealsAction calls the service.
Component: HotelDealsSection.tsx
Uses useQuery({ queryKey: ["hotel-deals"] }).
Displays items using HotelDealItem.
Note: It has a fallback image mechanism if deal images are missing.
3. Packages Implementation
Type: Static Package Categories
Service: fetchStaticPackageCategories in src/services/package-service.ts
Endpoint: POST /api/Package/StaticPackageCategory
Payload: Empty JSON {}.
Action: getStaticPackageCategoriesAction.
Component: TravelPackagesSection.tsx
Uses useQuery({ queryKey: ["travel-packages"] }).
Displays items using TravelPackageItem inside a carousel (configured for 4 items per slide).
Architecture Summary
page.tsx: Orchestrates the optional prefetching.
await Promise.all([
queryClient.prefetchQuery({ queryKey: ["flight-deals"], ... }),
queryClient.prefetchQuery({ queryKey: ["hotel-deals"], ... }),
queryClient.prefetchQuery({ queryKey: ["travel-packages"], ... })
]);
DealsCarouselMulti: A shared generic carousel component used by all three sections to maintain consistent behavior (autoplay, responsiveness).