Data fetching with React Server Components

Advanced
(0)
Ryan Toronto's avatar
Ryan Toronto

Teaching frontend development for over eight years

Build UI logo Build UI

About this course

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.

Price 349.00

Lifetime Access

Duration 1h 15m
Level Advanced

What you'll learn

Building a users table

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

Adding server-side pagination

Use query params to paginate the list of users.

Polishing the pagination controls

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

Adding client-side search

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

Preserving query params across interactions

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

Adding Loading UI

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

Adjusting the loading boundary

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

Showing pending UI during search

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

Debouncing client-side search

Wait until the user finishes typing before querying the database.

Reviews

(0)
No reviews yet. Be the first to review this course...