profile

Build UI

πŸŽ₯ New course: Data fetching with React Server Components

Published 8 months agoΒ β€’Β 3 min read

​

Happy Wednesday!

We've got some exciting news today – our Data fetching with React Server Components course is now fully complete!

In 1 hour and 15 minutes you’ll learn how to build a server-driven data table with React Server Components.

I got the idea for this course from a Next.js dashboard app I work on. It's filled with data tables that have pagination, searching, and filtering.

Originally I built these tables with client-side React, but six months ago I refactored them using React Server Components and I was blown away by how much simpler the code became. Suddenly all the effects, fetch requests, and buggy loading states vanished from my app, and I was left with a simple URL-driven application.

I was so surprised by how much better Server Components made the codebase that I knew I had to teach what I learned. Our Data fetching with React Server Components course is exactly that: everything I learned refactoring my dashboard to RSC:

The app we build in this course uses Next.js, TypeScript, Tailwind, and Prisma to teach you React's new server-driven paradigm.

Here's some things we cover:

  • Using Prisma to query data within Server Components
  • Adding server-side pagination
  • How the URL simplifies application state
  • Working with Client Components and the "use client" directive
  • The power of the Next.js <Link> component
  • The URLSearchParams API
  • Loading UI in Next.js with the loading.tsx file
  • An introduction to React Suspense
  • Using React DevTools to design Suspense boundaries
  • Rendering static and dynamic data separately
  • Creating custom <Suspense> boundaries
  • An introduction to React Transitions and the useTransition Hook
  • Avoiding race conditions and debouncing user input
  • Providing client feedback during server-side rerenders

I think you're going to be surprised by how much Server Components simplify your React apps, but don't take my word for it!

Here's what some of our members have said about the course:

Swapping to @nextjs 13s searchParams API for search and pagination of my @CosmicJS data took all of 15 minutes to set up, is fully server-side, and links are shareable thanks to the embedded query params.
​
Shoutout to the breakdown in @_buildui from @ryantotweets.
​
Love it.
​
– @_kejk​
Really like this into React Server Components lesson from @_buildui. Video and text complement each other. Gets right to the value prop.
​
Uses Prisma (not a SQL statement) and starts with dynamic (not cached) data.
​
Concise and effectiveπŸ‘Œ
​
– @phmiller​
I've recently begun the RSC course and I'm truly impressed by the capabilities of React Server Components, such as managing user search functionality without relying on useState.​
– @masiu_cd

If you've never worked with React Server Components before, watch the first lesson for free to see what all the buzz is about:

And if you're ready to binge the entire course, head over to Build UI to buy it for $99 – or grab a lifetime membership for just $149 and get access to it along with our courses on Framer Motion, Tailwind and Remix:

​Get Data Fetching with React Server Components ​→​

Early-bird pricing ends soon

Last April we introduced a new pricing model: a single purchase that gives you lifetime access to all current and future Build UI courses, forever.

We've been offering these lifetime memberships at an early-bird discount price of just $149, and our customers have been thrilled:

This is a fantastic deal! Even at full price it would be a great value, but the current early bird price is basically a "no-brainer" for anyone that does any amount of custom UI work.​
​– @rthaut​

We wanted to let you know that our early-bird pricing ends on October 11th, at which point our membership will return to its regular price of $249.

If you want to secure a lifetime membership at $149 (40% off the full price!), join today:

​​Join Build UI for $249 $149​​ →​​

As always, once you purchase a lifetime membership you'll get all our future courses without ever paying another penny.


Thanks for your support, and if you have a question about anything we're working on, hit reply and let us know!

Happy hacking,

– Sam and Ryan

113 Cherry St #92768, Seattle, WA 98104-2205
​Unsubscribe​

Build UI

by Sam Selikoff

Subscribe to stay updated on all the latest content from Build UI.

Read more from Build UI

Learn all about Search Params with React Server Components in our latest blog post, and check out our most recent podcast episode for our thoughts on React 19's upcoming features. Instant Search Params with React Server Components Read now β†’ Out-of-order streaming in React Watch now β†’ Asset loading in React Watch now β†’ Podcast - Blog Post Club: React Labs – What We’ve Been Working On Watch now β†’ Podcast - Instant URL search params in Next.js Watch now β†’ Podcast - React Deep Dive:...

2 months agoΒ β€’Β 1 min read

Dive into free videos on Radix, Remix, and Server Components, and catch our latest podcast episode where we talk through React's new cache function. Building an Elastic Slider with Framer Motion and Radix Watch now β†’ Why you can't set cookies in Server Components Watch now β†’ React's new cache function Watch now β†’ Optimistic UI in Remix Watch now β†’ Podcast - React Cache Deep Dive Watch now β†’ Podcast - Advanced Radix UI and Blog Post Club React Server Watch now β†’ And in case you missed it, last...

3 months agoΒ β€’Β 1 min read

Hey there! I've got some exciting news to share today: Advanced Radix UI – my newest course – is now live! Clocking in at 2 hours and 13 minutes across 35 chapters, you’ll learn how to use Radix to build four completely custom UI components: a Switch, a Selector Group, a Toast, and a Slider: Each component has a completely custom design using Tailwind, and there's also some slick animation and interactions we build with React and Framer Motion to enhance what Radix gives you out of the box....

4 months agoΒ β€’Β 1 min read
Share this post