Data Fetching & Streaming

What this module covers

4 steps · Next.js

1. Step 1. Data Fetching & Streaming

   // Await data directly in JSX — no useEffect needed export default async function Profile({ params }) { const user = await getUser(params.id); return <h1>{user.name}</h1>; } Parallel fetching: // Sequential — 2s + 2s = 4s total const user = await getUser(id); const posts = await getPosts(id); // Parallel — max(2s, 2s) = 2s total const [user, posts] = await Promise.all([ getUser(id), getPosts(id) ]); Suspense streaming: import { Suspense } from 'react'; export default function Page() { return ( <div> <Suspense fallback={<Skeleton />}> <SlowWidget /> {/* streams in when ready */} </Suspense> </div> ); } A loading.jsx file in a route folder wraps that whole segment in a Suspense boundary automatically.

   Sequential awaits pay the full latency of each request back to back; Promise.all starts them simultaneously so the total wait is just the slowest one, not the sum of both. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the fetch use Promise.all instead of sequential awaits?

2. Step 2. Quiz: Data Fetching & Streaming

   Answer these questions about parallel fetching and Suspense streaming.

   Promise.all runs fetches concurrently; loading.jsx provides an automatic Suspense fallback; streaming sends the page shell immediately while slow parts fill in. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Dashboard with Suspense Sections

   Build a dashboard with 3 independent data sections (users, revenue, activity). Wrap each in Suspense with a skeleton fallback. Fetch all data in parallel where possible.

   Giving each section its own Suspense boundary (rather than one boundary around all three) is what lets fast sections appear immediately while a slow one is still streaming in. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does Dashboard wrap its sections in Suspense with a fallback?

4. Step 4. Mini project: Data Fetching & Streaming

   Build a dashboard with 3 independent data sections (users, revenue, activity). Wrap each in Suspense with a skeleton fallback. Fetch all data in parallel where possible. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Giving each section its own Suspense boundary (rather than one boundary around all three) is what lets fast sections appear immediately while a slow one is still streaming in. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does Dashboard wrap its sections in Suspense with a fallback?