Sign inBuy now
Adding client-side search

Unlock with membership

Buy now

Adding client-side search

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

Data fetching with React Server Components

9 lessons · 1:15:55

  1. 1Building a users table4:55
  2. Adding server-side pagination7:26
  3. Polishing the pagination controls16:17
  4. Adding client-side search9:19
  5. Preserving query params across interactions18:30
  6. Adding Loading UI3:44
  7. Adjusting the loading boundary6:46
  8. Showing pending UI during search3:42
  9. Debouncing client-side search5:16

Buy this course to access this lesson's summary and source code.

Buy Data fetching with React Server Components

Buy the course

$199
one-time payment

Get everything in Data fetching with React Server Components.

  • 1+ hour of video
  • 9 lessons
  • Private Discord
  • Summaries with code
  • Unlimited access to course materials

Lifetime membership

$349
Access all coursesone-time payment

Get lifetime access to every Build UI course, including Data fetching with React Server Components, forever.

  • Access to all five Build UI courses
  • Full access to all future Build UI courses
  • Summaries with code
  • Video downloads
  • Working code demos
  • Private Discord

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!