Data Fetching Strategies
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the data fetching and management strategies employed within the AVP Supercars application. The project primarily utilizes static data structures coupled with React state management and Next.js App Router features to handle vehicle information, filtering, and dynamic routing.
Static Data Management
The application centralizes its core data—vehicle specifications and fleet details—within a static TypeScript file. This strategy ensures high performance and type safety across the frontend without the overhead of external database queries for relatively static inventory.
The Fleet Data Model
Vehicle information is structured using defined TypeScript types to ensure consistency across components.
| Field | Type | Description |
|---|---|---|
slug | string | Unique identifier used for dynamic routing. |
brand | string | The manufacturer of the vehicle. |
model | string | The specific model name. |
category | string | Classification (e.g., GT, Supercar, Luxury SUV). |
images | CarImage[] | Array of image source paths and alt text. |
highlights | CarHighlight[] | Technical specs like Engine, Power, and 0-100 km/h. |
Sources: data/fleet.ts:1-24
Client-Side State and Filtering
For the main fleet display, the application uses a hybrid approach where static data is initially loaded and subsequently managed via React hooks to support real-time user interactions like searching and filtering.
State Orchestration
In the FleetPage component, the static fleet array is memoized and passed into a local state. This allows for client-side filtering without refetching or reloading the page.
The flow demonstrates how data flows from a static source into a reactive state managed by user input.
Sources: app/fleet/page.tsx:16-24
Filtering Logic
The FleetFilters component consumes the full fleet list and performs logical operations to return a subset of data based on a search query (string match) and category selection.
- Search: Performs a case-insensitive check against
brand,model, andtagline. - Category: Filters by strict equality or allows "All".
Sources: components/FleetFilters.tsx:23-33
Dynamic Routing and Parameterized Fetching
The application utilizes Next.js dynamic segments to handle individual vehicle detail pages. Data is "fetched" by searching the static array using the route parameters.
Slug-Based Retrieval
The CarDetail page is an async Server Component that receives a slug via props. It uses the Array.prototype.find() method to retrieve the specific vehicle object from the static dataset.
This sequence illustrates the data retrieval process for dynamic routes.
Sources: app/fleet/[slug]/page.tsx:8-16
Content Selection Strategies
Different pages employ different strategies for selecting which data to display from the primary dataset:
- Selective Filtering: The Home page filters the fleet to show specific "Featured" vehicles (e.g., "audi-r8-spyder") to control the landing page experience.
- Full List Memoization: The Fleet page loads the entire array but uses
useMemoto prevent unnecessary recalculations of the source data. - Direct Indexing: Individual detail pages perform a direct lookup based on URL parameters.
Sources: app/page.tsx:11-14, app/fleet/page.tsx:16, app/fleet/[slug]/page.tsx:13
Summary of Fetching Implementation
The data fetching strategy is optimized for a fixed inventory of luxury vehicles, prioritizing speed and SEO through Next.js conventions while maintaining a dynamic feel via React's client-side state management.
| Strategy | Component/File | Implementation |
|---|---|---|
| Static Import | data/fleet.ts | Centralized source of truth. |
| Client-Side Filter | FleetFilters.tsx | useEffect and useMemo for real-time updates. |
| Dynamic Lookup | [slug]/page.tsx | Array search based on URL segments. |
| Featured Selection | app/page.tsx | Hardcoded slug filtering for marketing. |
Sources: app/page.tsx, app/fleet/page.tsx, components/FleetFilters.tsx, data/fleet.ts