Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

❌ Avoid resolving a promise in a server component and block rendering. ✅ Resolve the promise in the client side with `Reac.use()`

_georgemoller's profile picture

George Moller

118,975 subscribers

47,187 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von George Moller
George Mollervor 1 Jahr

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

Profilbild von React Universe Conf | Sept 2-4, 2025
React Universe Conf | Sept 2-4, 2025vor 1 Jahr

React Universe is a constantly evolving ecosystem—driving curiosity and continuous learning. And that's what we love about it! 🙌 Join us at React Universe Conf 2025 to future-proof your dev team:

Profilbild von pavi2410
pavi2410vor 1 Jahr

nextjs problems require nextjs solutions

Profilbild von Thibaud Dervily
Thibaud Dervilyvor 1 Jahr

I think this can impact SEO, am I wrong?

Profilbild von Ali Bey
Ali Beyvor 1 Jahr

Doesn’t resolving a promise in RSC happen only at buildtime? So it will not block the rendering in this case.

Profilbild von Alfon
Alfonvor 1 Jahr

typo, React.use()

Profilbild von Nicholas Ly
Nicholas Lyvor 1 Jahr

Can't you just make `User` a server component and do the fetch there? You can still wrap `User` with Suspense and it'll function the exact same—no need for `React.use()`.

Profilbild von Josh
Joshvor 1 Jahr

Why have the server component in this scenario? It seems entirely redundant

Profilbild von Javed
Javedvor 1 Jahr

Why passing to the client when you can still make the fetch call on server and at the same time use suspense with it Just need to create a wrapper around the client components

Profilbild von Debo.dev
Debo.devvor 1 Jahr

How does this affect security?

Ähnliche Videos

🧵1/2 Socket Programming in C: Server-Side Basics - Set up a server using socket(), bind(), and listen(). - Accept client connections with accept(). - Send and receive data over TCP. Video 1: Server-Side in C! Video 2: Client-Side Programming will be uploaded soon—stay tuned! 🖥️
2:20

🧵1/2 Socket Programming in C: Server-Side Basics - Set up a server using socket(), bind(), and listen(). - Accept client connections with accept(). - Send and receive data over TCP. Video 1: Server-Side in C! Video 2: Client-Side Programming will be uploaded soon—stay tuned! 🖥️

trish

2,924,461 Aufrufe • vor 1 Jahr

"How to share state between React client components with a parent server component?" 👇
0:32

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

50,550 Aufrufe • vor 1 Jahr

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:
0:25

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,509 Aufrufe • vor 5 Monaten

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.
1:24

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 Aufrufe • vor 2 Jahren

You can now try client-side rendering in Remotion!
8:22

You can now try client-side rendering in Remotion!

Jonny Burger

76,698 Aufrufe • vor 5 Monaten

The heroes of Honor of Kings are inviting you from all around the world! 🤩 On June 20th, let's fulfill a promise with the heroes and fight side by side in Hero's Gorge! #HonorOfKings
2:05

The heroes of Honor of Kings are inviting you from all around the world! 🤩 On June 20th, let's fulfill a promise with the heroes and fight side by side in Hero's Gorge! #HonorOfKings

Honor of Kings

128,120 Aufrufe • vor 2 Jahren

Story Event [Yuji Itadori’s Promise] PV Revealed! Story Event "Yuji Itadori’s Promise" Coming Soon! This is an event where you can watch a limited storyline centered around Yuji Itadori and earn various in-game rewards. Progressing through the task will reward you with event-limited SSR Recollection Bits [Resolve in the Maelstrom].
1:10

Story Event [Yuji Itadori’s Promise] PV Revealed! Story Event "Yuji Itadori’s Promise" Coming Soon! This is an event where you can watch a limited storyline centered around Yuji Itadori and earn various in-game rewards. Progressing through the task will reward you with event-limited SSR Recollection Bits [Resolve in the Maelstrom].

Jujutsu Kaisen Phantom Parade Official

1,703,572 Aufrufe • vor 2 Monaten

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev
0:44

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev

sleitnick

20,016 Aufrufe • vor 1 Jahr

So I made a promise to a couple of people in the Discord server for Yoyoyollie (WISHLIST DELIVERY MUST COMPLETE)'s #DeliveryMustComplete. The promise was that this weekend, I'd put a hat on a plane (long story) so here you go. Plane in a hat. #gamedev #indiedev #screenshotsaturday #NovaSquadron
0:58

So I made a promise to a couple of people in the Discord server for Yoyoyollie (WISHLIST DELIVERY MUST COMPLETE)'s #DeliveryMustComplete. The promise was that this weekend, I'd put a hat on a plane (long story) so here you go. Plane in a hat. #gamedev #indiedev #screenshotsaturday #NovaSquadron

Clara Gale ✈️ NS 0.4.1 out now!

12,247 Aufrufe • vor 8 Monaten

New video showing off the Cloudflare Developers Agent Framework just landed showing off my favorite features: ✅ Synchronized Agent state and client-side ✅ SQL storage (sorry uncle bathrobe) ✅ Durable Execution of third party YouTube APIs ✅ Human in the Loop ✅ Client + Server RPC
3:17

New video showing off the Cloudflare Developers Agent Framework just landed showing off my favorite features: ✅ Synchronized Agent state and client-side ✅ SQL storage (sorry uncle bathrobe) ✅ Durable Execution of third party YouTube APIs ✅ Human in the Loop ✅ Client + Server RPC

Craig Dennis

25,157 Aufrufe • vor 1 Jahr

Returning education to the states is a promise to put students first and in Ohio, we’re seeing that promise take shape!
0:23

Returning education to the states is a promise to put students first and in Ohio, we’re seeing that promise take shape!

Secretary Linda McMahon

17,441 Aufrufe • vor 8 Monaten

He said if Auburn came back and won he was jumping in the pool!! Promise made….promise kept!! Heck of a job by Bruce and the boys!
0:22

He said if Auburn came back and won he was jumping in the pool!! Promise made….promise kept!! Heck of a job by Bruce and the boys!

Gabe Gross

68,629 Aufrufe • vor 1 Jahr

Been using a similar pattern for a long time in the Next.js, but now with the app router we can also add a loader function that's executed in a server component. (Thanks Ryan Florence for the inspiration) ✅ Infer/validate params/searchParams from Zod schema. ✅ Infer data
0:31

Been using a similar pattern for a long time in the Next.js, but now with the app router we can also add a loader function that's executed in a server component. (Thanks Ryan Florence for the inspiration) ✅ Infer/validate params/searchParams from Zod schema. ✅ Infer data

Eelco Wiersma

22,573 Aufrufe • vor 1 Jahr

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.
0:33

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

Delba

157,319 Aufrufe • vor 2 Jahren

Voter in Nevada: “I don't believe anymore in the Democrat Party because they promise and promise… and they never do anything.”
0:41

Voter in Nevada: “I don't believe anymore in the Democrat Party because they promise and promise… and they never do anything.”

America

104,691 Aufrufe • vor 1 Jahr

A promise is a promise. Mark Rodgers The Sports Animal
0:31

A promise is a promise. Mark Rodgers The Sports Animal

Matt Ravis

60,781 Aufrufe • vor 11 Monaten

You heard the man, a promise is a promise 🕺
0:55

You heard the man, a promise is a promise 🕺

RWBY

47,872 Aufrufe • vor 5 Monaten

I made a promise in my first term: no new taxes. I kept that promise, and I’ll keep it in a second term.
0:29

I made a promise in my first term: no new taxes. I kept that promise, and I’ll keep it in a second term.

Joe Lombardo

10,838 Aufrufe • vor 1 Monat