What is Data Fetching?

Data Fetching in Frontend Accelerator leverages Server Components to fetch data directly on the server using async/await, eliminating the need for useEffect and client-side loading states.

Server Component Data Fetching:

export default async function ProductsPage() {
  const db = new Database();
  const products = await db.getAllProducts();
  return <ProductList products={products} />;
}

Patterns:

• Direct database queries: Fetch from Firestore or MongoDB directly in Server Components
• Parallel fetching: Multiple async operations with Promise.all
• Sequential fetching: Waterfall requests when data depends on previous results
• Request memoization: Automatic deduplication of identical fetch requests

Caching:

Frontend Accelerator uses Next.js caching:

• fetch() - Cached by default
• Static data - Manual revalidation with revalidatePath()
• Dynamic data - Use no-store or revalidate: 0

AI-Friendly: Server Components make data fetching explicit and collocated with rendering logic, making it trivial for AI to understand data dependencies.