Data Fetching in React & Next.js

"use client";

import { useState, useEffect } from "react";

interface Post {
  id: number;
  title: string;
  body: string;
}

export function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setIsLoading(true);
    setError(null);

    fetch("/api/posts")
      .then((res) => {
        if (!res.ok) throw new Error("Failed to fetch");
        return res.json();
      })
      .then((data) => {
        setPosts(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

useEffect(() => {
  const controller = new AbortController();

  setIsLoading(true);
  setError(null);

  fetch(`/api/posts?q=${query}`, { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => {
      setPosts(data);
      setIsLoading(false);
    })
    .catch((err) => {
      if (err.name !== "AbortError") {
        setError(err.message);
        setIsLoading(false);
      }
    });

  // Cleanup: abort previous request when query changes
  return () => controller.abort();
}, [query]);

import { db } from "@/lib/db"; // Prisma, Drizzle, etc.

// This is a Server Component: runs entirely on the server
export default async function PostsPage() {
  // Direct database query. No API route. No client exposure.
  const posts = await db.post.findMany({
    where: { published: true },
    orderBy: { createdAt: "desc" },
    take: 20,
  });

  return (
    <main>
      <h1>Latest Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

export default async function DashboardPage() {
  // Start all fetches concurrently: do NOT await each in sequence
  const [user, stats, recentActivity] = await Promise.all([
    getUser(),
    getDashboardStats(),
    getRecentActivity(),
  ]);

  return (
    <Dashboard user={user} stats={stats} activity={recentActivity} />
  );
}

// Sequential (waterfall): AVOID this
async function DashboardPageSlow() {
  const user = await getUser();           // waits
  const stats = await getDashboardStats(); // waits after user resolves
  const activity = await getRecentActivity(); // waits after stats resolves
  // Total time = user + stats + activity (summed, not parallel)
}

import { cookies } from "next/headers";
import { verifySession } from "@/lib/auth";

export default async function AccountPage() {
  const cookieStore = await cookies();
  const session = await verifySession(cookieStore.get("session")?.value);

  if (!session) {
    redirect("/login");
  }

  // Query is scoped to the authenticated user: no client-side token exposure
  const profile = await db.user.findUnique({
    where: { id: session.userId },
    select: { name: true, email: true, plan: true },
  });

  return <AccountSettings profile={profile} />;
}

// No hooks. No useEffect. No useState. No loading state.
// This component runs on the server and is never sent to the browser.
async function ProductDetails({ productId }: { productId: string }) {
  // Awaiting directly in the component body
  const product = await db.product.findUnique({
    where: { id: productId },
    include: { reviews: true, inventory: true },
  });

  if (!product) notFound();

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <PriceDisplay price={product.price} />
      {/* AddToCartButton is "use client": it receives serialized product data */}
      <AddToCartButton productId={product.id} name={product.name} />
    </article>
  );
}

import { cache } from "react";
import { db } from "@/lib/db";

// Wrapped with cache(): called multiple times in the same request tree,
// but only executes the database query once per request
export const getUser = cache(async (userId: string) => {
  return db.user.findUnique({ where: { id: userId } });
});

// In your layout:
// const user = await getUser(session.userId);
// In your page (same request):
// const user = await getUser(session.userId); // uses cached result

// Server Component: fetches data, passes to client component
async function OrderSummary({ orderId }: { orderId: string }) {
  const order = await db.order.findUnique({
    where: { id: orderId },
    select: {
      id: true,
      total: true,
      status: true,
      items: { select: { name: true, quantity: true, price: true } },
    },
  });

  // Only serializable data crosses the boundary
  return <OrderClient order={order} />;
}

// Client Component: handles interactivity
"use client";
function OrderClient({ order }: { order: SerializedOrder }) {
  const [expanded, setExpanded] = useState(false);
  // ...
}

// No caching: fresh data every request (Next.js 15 default)
const data = await fetch("/api/prices");

// Cache indefinitely: revalidate on demand
const data = await fetch("/api/config", {
  next: { tags: ["config"] },
});

// Time-based revalidation: re-fetch after 60 seconds
const data = await fetch("/api/exchange-rates", {
  next: { revalidate: 60 },
});

// Force static: cache at build time, never re-fetch
const data = await fetch("/api/countries", {
  cache: "force-cache",
});

// Revalidate the config tag when config changes
import { revalidateTag } from "next/cache";
export async function updateConfig() {
  "use server";
  await db.config.update(/* ... */);
  revalidateTag("config"); // purges all fetch() calls tagged "config"
}

// Server Component: initial data, no client JS
async function InboxPage() {
  const messages = await db.message.findMany({
    where: { userId: session.userId, archived: false },
    orderBy: { createdAt: "desc" },
  });

  // Pass initial data as prop to the client component
  return <MessageList initialMessages={messages} />;
}

// Client Component: handles realtime polling and mutations
"use client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function MessageList({ initialMessages }: { initialMessages: Message[] }) {
  const queryClient = useQueryClient();

  // initialData seeds the cache: no loading flash on first render
  const { data: messages } = useQuery({
    queryKey: ["messages"],
    queryFn: () => fetch("/api/messages").then((r) => r.json()),
    initialData: initialMessages,
    refetchInterval: 30_000, // poll every 30s
  });

  const archiveMutation = useMutation({
    mutationFn: (id: string) =>
      fetch(`/api/messages/${id}/archive`, { method: "POST" }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["messages"] }),
  });

  // ...
}

import { useQuery } from "@tanstack/react-query";

interface Post {
  id: number;
  title: string;
  body: string;
}

async function fetchPost(id: number): Promise<Post> {
  const res = await fetch(`/api/posts/${id}`);
  if (!res.ok) throw new Error("Failed to fetch post");
  return res.json();
}

function PostView({ postId }: { postId: number }) {
  const {
    data: post,
    isPending,   // true when no data in cache yet
    isFetching,  // true on any background fetch (includes refetches)
    isError,
    error,
  } = useQuery({
    queryKey: ["post", postId],    // cache key: change to refetch
    queryFn: () => fetchPost(postId),
    staleTime: 1000 * 60 * 5,     // consider data fresh for 5 minutes
    gcTime: 1000 * 60 * 10,       // keep unused cache for 10 minutes
  });

  if (isPending) return <Skeleton />;
  if (isError) return <ErrorMessage message={error.message} />;

  return <Article post={post} />;
}

import { useMutation, useQueryClient } from "@tanstack/react-query";

function LikeButton({ postId, initialLiked }: { postId: number; initialLiked: boolean }) {
  const queryClient = useQueryClient();

  const likeMutation = useMutation({
    mutationFn: (liked: boolean) =>
      fetch(`/api/posts/${postId}/like`, {
        method: liked ? "POST" : "DELETE",
      }),

    // Optimistic update: update UI before the request completes
    onMutate: async (liked) => {
      // Cancel any in-flight queries for this post
      await queryClient.cancelQueries({ queryKey: ["post", postId] });

      // Snapshot the previous value for rollback
      const previous = queryClient.getQueryData(["post", postId]);

      // Optimistically update the cache
      queryClient.setQueryData(["post", postId], (old: Post) => ({
        ...old,
        liked,
        likeCount: old.likeCount + (liked ? 1 : -1),
      }));

      return { previous };
    },

    // Rollback on error
    onError: (_err, _liked, context) => {
      queryClient.setQueryData(["post", postId], context?.previous);
    },

    // Always refetch after settle to ensure server truth
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["post", postId] });
    },
  });

  return (
    <button onClick={() => likeMutation.mutate(!initialLiked)}>
      {initialLiked ? "Unlike" : "Like"}
    </button>
  );
}

// app/posts/page.tsx: Server Component
import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

export default async function PostsPage() {
  const queryClient = new QueryClient();

  // Pre-fetch on the server: seeds the client cache
  await queryClient.prefetchQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });

  return (
    // Transfers server-side cache state to the client
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PostsClient />
    </HydrationBoundary>
  );
}

// Client Component: cache is already populated, no loading flash
"use client";
function PostsClient() {
  const { data: posts } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 1000 * 60,
  });
  // data is immediately available from the hydrated cache
}

import { Suspense } from "react";

export default function DashboardPage() {
  return (
    <div className="dashboard">
      {/* Renders immediately: no data dependency */}
      <DashboardHeader />

      {/* Streams in when the slow analytics fetch resolves */}
      <Suspense fallback={<AnalyticsSkeleton />}>
        <AnalyticsPanel />
      </Suspense>

      {/* Renders in parallel: its own independent Suspense boundary */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}

// Async Server Component: suspends while fetching
async function AnalyticsPanel() {
  // This fetch can take 800ms: the rest of the page is already visible
  const analytics = await db.analytics.getWeeklySummary();
  return <AnalyticsChart data={analytics} />;
}

async function RecentActivity() {
  const activity = await db.activity.getRecent({ limit: 10 });
  return <ActivityFeed items={activity} />;
}

// Automatically shown while products/page.tsx fetches its data
export default function ProductsLoading() {
  return (
    <div className="grid">
      {Array.from({ length: 12 }).map((_, i) => (
        <div key={i} className="skeleton-card" />
      ))}
    </div>
  );
}

// Server Component: starts the fetch, does NOT await it
export default function ProductsPage() {
  // Promise is created here but not awaited
  const productsPromise = fetchProducts();

  return (
    <Suspense fallback={<ProductsSkeleton />}>
      {/* Pass promise as prop: client component consumes it */}
      <ProductsClient productsPromise={productsPromise} />
    </Suspense>
  );
}

// Client Component: suspends until the promise resolves
"use client";
import { use } from "react";

function ProductsClient({ productsPromise }: { productsPromise: Promise<Product[]> }) {
  // Suspends the component until the promise resolves
  const products = use(productsPromise);

  return <ProductGrid products={products} />;
}

// WATERFALL: each awaits the previous (total: sum of all durations)
async function SlowPage({ userId }: { userId: string }) {
  const user = await getUser(userId);           // 80ms
  const posts = await getPosts(user.id);        // 120ms
  const friends = await getFriends(user.id);    // 90ms
  // Total: ~290ms
}

// PARALLEL: all start simultaneously (total: slowest duration)
async function FastPage({ userId }: { userId: string }) {
  const [user, posts, friends] = await Promise.all([
    getUser(userId),    // 80ms
    getPosts(userId),   // 120ms: these don't depend on user
    getFriends(userId), // 90ms
  ]);
  // Total: ~120ms
}

// When there IS a real dependency, use initialise-then-await
async function DependentPage({ userId }: { userId: string }) {
  const user = await getUser(userId); // must fetch first

  // Start both in parallel once user is available
  const [orders, preferences] = await Promise.all([
    getOrders(user.accountId),
    getPreferences(user.preferenceProfileId),
  ]);
}

function PostCard({ post }: { post: Post }) {
  const queryClient = useQueryClient();

  return (
    <article
      onMouseEnter={() => {
        // Pre-warm the cache when the user hovers
        queryClient.prefetchQuery({
          queryKey: ["post", post.id],
          queryFn: () => fetchPost(post.id),
          staleTime: 1000 * 60 * 5,
        });
      }}
    >
      <Link href={`/posts/${post.id}`}>{post.title}</Link>
    </article>
  );
}

// Server Component: API key never leaves the server
async function WeatherWidget({ city }: { city: string }) {
  const data = await fetch(
    `https://api.weather.com/v1/current?city=${city}`,
    {
      headers: {
        "X-API-Key": process.env.WEATHER_API_KEY!, // server-only env var
      },
    }
  ).then((r) => r.json());

  return <Weather data={data} />;
}

// Explicitly select only public fields before passing to client
async function UserProfilePage({ userId }: { userId: string }) {
  const user = await db.user.findUnique({
    where: { id: userId },
    select: {
      name: true,
      bio: true,
      avatarUrl: true,
      // password: false (default): never selected
      // internalId: false: not included
      // paymentMethodId: false: not included
    },
  });

  return <ProfileClient profile={user} />;
}

async function OrderDetails({ orderId }: { orderId: string }) {
  const session = await getSession();
  if (!session) redirect("/login");

  const order = await db.order.findUnique({ where: { id: orderId } });

  // Verify the order belongs to the authenticated user
  if (order?.userId !== session.userId) {
    notFound(); // 404 rather than 403 to avoid enumeration
  }

  return <OrderView order={order} />;
}

// app/tasks/page.tsx: Server Component
import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";

export default async function TasksPage() {
  const queryClient = new QueryClient();

  // Pre-fetch on server, hydrate client cache
  await queryClient.prefetchQuery({
    queryKey: ["tasks"],
    queryFn: getTasks, // same function used client-side
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <TasksClient />
    </HydrationBoundary>
  );
}

// components/tasks/TasksClient.tsx
"use client";
function TasksClient() {
  const { data: tasks } = useQuery({
    queryKey: ["tasks"],
    queryFn: getTasks,
    staleTime: 1000 * 30, // consider fresh for 30s
  });

  const createTask = useMutation({
    mutationFn: (title: string) => fetch("/api/tasks", {
      method: "POST",
      body: JSON.stringify({ title }),
    }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["tasks"] }),
  });

  // data is available immediately from hydrated cache
}

"use client";
import { useOptimistic, useTransition } from "react";

function TodoItem({ todo }: { todo: Todo }) {
  const [isPending, startTransition] = useTransition();
  const [optimisticTodo, setOptimisticTodo] = useOptimistic(todo);

  const toggle = () => {
    startTransition(async () => {
      // Update UI immediately
      setOptimisticTodo({ ...todo, completed: !todo.completed });

      // Perform server action
      await toggleTodo(todo.id);
    });
  };

  return (
    <li style={{ opacity: isPending ? 0.7 : 1 }}>
      <button onClick={toggle}>
        {optimisticTodo.completed ? "✓" : "○"} {todo.title}
      </button>
    </li>
  );
}

yarn create vite my-app --template react-ts
# npm create vite@latest my-app -- --template react-ts

cd my-app
yarn install
# npm install

yarn add @tanstack/react-query @tanstack/react-query-devtools
# npm install @tanstack/react-query @tanstack/react-query-devtools

yarn add @tanstack/react-router
# npm install @tanstack/react-router

import { useQuery } from "@tanstack/react-query";

interface Post { id: number; title: string; body: string; }

async function fetchPosts(): Promise<Post[]> {
  const res = await fetch("/api/posts");
  if (!res.ok) throw new Error("Failed to fetch posts");
  return res.json();
}

export function PostList() {
  const { data: posts, isPending, isError } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 5 * 60 * 1000,  // treat as fresh for 5 minutes
  });

  if (isPending) return <p>Loading...</p>;
  if (isError)   return <p>Error loading posts.</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

import { createRoute } from "@tanstack/react-router";
import { queryClient } from "@/lib/queryClient";
import { fetchPosts } from "@/api/posts";

const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/posts",
  // Loader runs BEFORE the component renders, populating the cache
  loader: () =>
    queryClient.ensureQueryData({
      queryKey: ["posts"],
      queryFn: fetchPosts,
    }),
  component: PostList,
});

function PostList() {
  // Data is already in cache from the loader -- no loading spinner needed
  const { data } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts });
  return <ul>{data?.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

// Anti-pattern: useEffect data fetching
function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/posts")
      .then((r) => r.json())
      .then(setPosts)
      .finally(() => setLoading(false));
    // Problems: no error handling, no deduplication, race condition on unmount,
    // no background revalidation, no cache, triggers double-fetch in StrictMode
  }, []);
  ...
}

// Use TanStack Query instead (shown above)