Видео 25
Просмотров 219 526

9:01

Asset loading in React

11:11

Out-of-order streaming in React

11:02

Preloading data (React's cache part 2)

10:09

React's new cache function

10:14

Why you can't set cookies in Server Components

10:58

Handling RSC Errors in Next.js

In today's video we'll use an error boundary to refresh a React Server Component that threw an error. We'll also dive into transitions and see how they allow us to batch together state updates that finish at different times.
- 0:00 - Intro
- 1:06 - Error handling in Next.js
- 2:11 - Resetting without fixing the error
- 3:16 - Rerunning the server component
- 4:23 - Avoiding race conditions with transitions
- 6:47 - Why a transition is needed
For more videos on React Server Components check out Build UI: buildui.com/?

Видео

9:01

Where should this component run?

Просмотров 1,8 тыс.7 месяцев назад

I love how the RSC architecture approaches bundling and running React components. Non-interactive components run on the server, keeping the initial load fast and the bundle size small. Meanwhile, interactive components are run on the client, making the UI feel snappy and instantaneous. But what about components that need to run on both the server and client? How does the RSC architecture addres...

11:11

Asset loading in React

Просмотров 2 тыс.8 месяцев назад

In this video we’re going to take a look at the new Asset Loading feature coming to React 19. - 0:00 - Intro - 0:40 - Flash of unstyled content - 1:46 - Asset loading in React - 4:13 - Books app - 6:40 - The bookshelf component - 7:18 - How the transition works - 9:12 - Stylesheets do not unload Source code for books app: github.com/ryanto/asset-loading-suspense Check out my website: buildui.com

11:02

Out-of-order streaming in React

Просмотров 7 тыс.9 месяцев назад

Wish your users could see content instantly, even if data takes a second? In this video we're going to learn how out-of-order streaming allows React Server Components to render independently, showing your UI as soon as possible! - 0:00 - Intro - 0:15 - Introduction to streaming - 2:14 - Out-of-order streaming - 4:29 - Streaming and Suspense - 8:04 - Streaming multiple components - 9:41 - UI ide...

10:09

Preloading data (React's cache part 2)

Просмотров 1,6 тыс.9 месяцев назад

In this video we're going to continue where we left off in part 1 and use React's cache function to preload data. Watch part 1 here: ruclips.net/video/MxjCLqdk4G4/видео.html - 0:00 - Intro - 0:23 - Fetching data for the page - 4:15 - Why is the page slow? - 6:35 - Using cache to avoid waterfalls - 8:47 - Is preloading unused data okay? My website: buildui.com

10:14

React's new cache function

Просмотров 11 тыс.9 месяцев назад

In this video we're going to look at how React's cache function helps avoid unnecessary data requests. - 0:00 - Intro - 0:34 - Loading the current user - 2:31 - Using React’s cache function - 4:06 - Why not use props? - 7:51 - Good things to know about cache Preloading data with cache: ruclips.net/video/_gZ3ctkbGPo/видео.html Check out my course "Data fetching with React Server Components" here...

Why you can't set cookies in Server Components

10:58

Why you can't set cookies in Server Components

Просмотров 10 тыс.9 месяцев назад

Today we're going look at why you can't set cookies when rendering server components in Next.js. - 0:00 - Intro - 1:22 - Setting cookies in RSC - 2:43 - Suspense - 5:13 - Streaming - 6:55 - Anatomy of an HTTP request - 9:22 - Setting cookies in Next.js For more videos on React check out buildui.com/

4:47

The useTransition hook

Просмотров 1,6 тыс.Год назад

Hi everyone! I wanted to share a free lesson on the useTransition hook from my course "Data fetching with React Server Components". - 0:00 - Intro - 0:23 - Start of lesson - 0:46 - useTransition hook - 2:22 - Styling the searching UI - 3:24 - Lesson outro - 3:56 - Outro Join Build UI: buildui.com/pricing Course: buildui.com/courses/react-server-components

10:10

Refresh React Server Components

Просмотров 4,8 тыс.Год назад

In this video I'm going to show you how to automatically refresh a Next.js app whenever data in an external system changes. Code: buildui.com/recipes/refresh-app-router-cache-server-action - 0:00 - Intro - 1:23 - Server action - 4:18 - Refresh component - 6:49 - Interval with focus event - 9:47 - Outro Check out my latest course "Data fetching with React Server Components" exclusively on Build ...

15:21

Why I use Zod with Server Actions

Просмотров 13 тыс.Год назад

In this video we're going to take a look at how Zod makes FormData easy to work with! Check out my Build UI course on React Server Components: buildui.com/courses/react-server-components - 0:00 - Intro - 0:23 - Introduction to Server Actions - 2:58 - Problems with FormData and TypeScript - 6:14 - Introduction to Zod - 10:17 - Dealing with Checkboxes - 12:35 - Code cleanup - 13:42 - Summary - 14...

12:39

Query params with TypeScript

Просмотров 3,1 тыс.Год назад

In this video we're going to use TypeScript to recreate the type for query parameters.

12:11

Next.js Deploy Notifications

Просмотров 7 тыс.2 года назад

In this video we're going to build a simple version of the next-deploy-notifications library from scratch. Next deploy notifications: github.com/ryanto/next-deploy-notifications

8:40

Transitions that Suspend - React 18

Просмотров 3 тыс.2 года назад

Today we're going to take a look at the useTransition hook that's new in React 18. Source code: github.com/ryanto/suspense-transitions

17:52

Refactoring from useState to useReducer

Просмотров 8962 года назад

Today we're going to refactor a database app from useState to useReducer. Source: github.com/ryanto/use-state-vs-use-reducer

12:28

Testing images with Cypress

Просмотров 11 тыс.2 года назад

Today we'll write a test that asserts an image was correctly uploaded and displayed using Cypress. isFixtureImage command: gist.github.com/ryanto/76ed7013cc63565932ba3475403d6a73