Vertex

Fetching data in server components

A server component can simply await its data. No client-side loading state, no waterfall of effects, and no exposed credentials.

Lesson 3.14m 21sIntermediate12.6k students

Chapters

4:21
  1. 0:00Introduction to Server-Side Data Fetching
  2. 0:37Setting Up the Project
  3. 0:57Defining Types and Creating Components
  4. 1:33Fetching and Displaying Data
  5. 3:00Handling Multiple Fetch Requests Efficiently
  6. 4:03Conclusion and Next Steps

What this lesson covers

  • Await data directly inside an async server component
  • Fetch in parallel instead of sequential waterfalls
  • Keep tokens and database access on the server

This lesson sits in Data Fetching and Caching, part of Next.js App Router in Depth. It assumes what came before it and leads directly into the next lesson in the module.

In this lesson you will

  • Await data directly inside an async server component
  • Fetch in parallel instead of sequential waterfalls
  • Keep tokens and database access on the server

Resources

Previous lessonPassing data across the boundary2.3 · 6m 19sNext lessonCaching and revalidation3.2 · 25m 22s