Pro course

Data fetching with React Server Components

8 Lessons
1h 10m
Ryan Toronto

Taught by

Ryan Toronto

Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to this day. Hooks were then added which introduced a new level of composition, bringing state and effects to functional components and marking the second era of React. And today, with the introduction of Server Components, we are entering React's third era of innovation.

This course covers the fundamentals of data fetching with React Server Components. You'll learn about the benefits that RSC brings to the development model by building a server-driven data table that is derived from the URL and supports features like searching and pagination. By the end of this course you'll feel comfortable working with Server Components, and you'll have a better grasp on which parts of your own applications could benefit from React's new architecture.


Building a users tableFree

Lesson 14:55

Use Prisma to fetch data directly inside of a Server Component.

Adding server-side paginationPro

Lesson 27:26

Use query params to paginate the list of users.

Polishing the pagination controlsPro

Lesson 316:17

Use Prisma's count function to build out the pagination area.

Adding client-side searchPro

Lesson 49:19

Create a Client Component that re-renders the users table whenever a user types in the search field.

Preserving query params across interactionsPro

Lesson 518:30

Refactor our URL logic to maintain all parameter values using URLSearchParams.

Adding Loading UIPro

Lesson 63:44

Render an instant loading screen while a Server Component fetches data.

Adjusting the loading boundaryPro

Lesson 76:46

Use a custom Suspense boundary to instantly render the static parts of a page.

Showing pending UI during searchPro

Lesson 83:42

Use a React Transition to render a spinner while a Server Component is updating.

Coming soon

Lesson 9

Debouncing client-side search

Wait until the user finishes typing before querying the database.

Buy Data fetching with React Server Components

See how this exciting new primitive simplifies your data-fetching code.

Buy the course

$99one-time payment

Get everything in Data fetching with React Server Components.

  • 1+ hour of video
  • 8 lessons with more coming soon
  • Private Discord
  • Summaries with code
  • Unlimited access to course materials

Lifetime membership


early bird discountone-time payment

Lifetime access to all current and future premium Build UI courses, forever.

  • Courses on Framer Motion, Tailwind, and Remix
  • New videos added weekly
  • Refactoring videos on React
  • Private Discord
  • Summaries with code
  • Full access to all future Build UI courses

What's included

Stream or download every video

Watch every lesson directly on Build UI, or download them to watch offline at any time.

Live code demos

Access to a live demo of each lesson that runs directly in your browser.

Private Discord

Chat with Sam, Ryan and other Build UI members about the lessons – or anything else you're working on – in our private server.

Video summaries with code snippets

Quickly reference a lesson's material with text summaries and copyable code snippets.

Source code

Each lesson comes with a GitHub repo that includes a diff of the source code.

Invoices and receipts

Get reimbursed from your employer for becoming a better coder!