Data Fetching and Caching

When to use this skill

• When building pages that need SEO (Tours, Details).
• When deciding between RSC and Client-side useEffect.

Strategy

• RSC (Default): Fetch data in Server Components for speed and SEO.
• Client Fetching: Use only for highly interactive, private, or real-time data.
• No-store: Use cache: 'no-store' or dynamic = 'force-dynamic' for frequently changing data (like live availability).

Implementation (RSC)

import { TourService } from '@/services/tours';

export default async function ToursPage() {
    const tours = await TourService.getAll();
    
    return (
        <div>
            {tours.documents.map(tour => <TourCard key={tour.$id} tour={tour} />)}
        </div>
    );
}

Instructions

• Type Safety: Await findings and pass typed objects to child components.
• Suspense: Always wrap RSC data-fetching segments in Suspense for better UX.