Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

35,196 subscribers

69,150 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & Teknoloji Komedi

Anya Rossi• Live Now

Private livecam show

10 Yorum

Savva Mikhalevski profil fotoğrafı

Savva Mikhalevski2 yıl önce

This can be done with the same number of lines using regular REST. But with rate limiting, caching, proper security, and separation of concerns.

jarindr.eth | zentry ⚡️ profil fotoğrafı

jarindr.eth | zentry ⚡️2 yıl önce

Can someone tell me what's the benefit vs calling API and update result on the client again? Not talking about you don't need "backend"

Alex Sidorenko profil fotoğrafı

Alex Sidorenko2 yıl önce

I think it's mainly this 1. Eliminate the problem of duplicating and synchronizing the data state on the client 2. Great potential for shared full-stack components in the future

Eric Afes profil fotoğrafı

Eric Afes2 yıl önce

So having a key on the Suspense forces the server component to rerun? 🤔

Alex Sidorenko profil fotoğrafı

Alex Sidorenko2 yıl önce

The server component reruns because of the query params updates (regardless of the key on the Suspense). The key on the Suspense re-triggers the suspense fallback on every re-run. Here is how it would work without it.

Abdulrahman profil fotoğrafı

Abdulrahman2 yıl önce

It’s legal though 😂

Fredkisss is on 🦋 blue sky 🦋 profil fotoğrafı

Fredkisss is on 🦋 blue sky 🦋2 yıl önce

This is actually incredible 🤯

Kofi Bamfo Quaicoe profil fotoğrafı

Kofi Bamfo Quaicoe2 yıl önce

Can you please make a @YouTube tutorial for all these...

Alex Sidorenko profil fotoğrafı

Alex Sidorenko2 yıl önce

@YouTube What would you like to see in a tutorial?

Salik Jamal profil fotoğrafı

Salik Jamal2 yıl önce

These tutorials are always great man, Next.js is awesome!

Benzer Videolar

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

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

Alex Sidorenko

50,550 görüntüleme • 1 yıl önce

When to use Server vs Client components in Next.js 13

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,146 görüntüleme • 2 yıl önce

Server-side search with Next.js 13 and server components

Server-side search with Next.js 13 and server components

Alex Sidorenko

208,520 görüntüleme • 2 yıl önce

Pagination in Next.js 13 with server components

Pagination in Next.js 13 with server components

Alex Sidorenko

140,144 görüntüleme • 2 yıl önce

Day 8: React Server Components

Day 8: React Server Components

srgm

16,570 görüntüleme • 11 ay önce

Moving data fetching between client and server with SWR

Moving data fetching between client and server with SWR

Alex Sidorenko

33,430 görüntüleme • 1 yıl önce

opencode's client/server architecture is important we're making quick server management smoother

opencode's client/server architecture is important we're making quick server management smoother

David Hill

64,271 görüntüleme • 4 ay önce

Streaming data from server to client with "use" in Next.js

Streaming data from server to client with "use" in Next.js

Alex Sidorenko

36,533 görüntüleme • 1 yıl önce

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 görüntüleme • 2 yıl önce

New Expo example: graphQL server and client with ✨automatic type generation✨! 🧘‍♀️ GraphQL Yoga - server 💜 URQL - client 🎉 gql.tada - type generation ☁️ EAS Hosting - for API & web deployments

New Expo example: graphQL server and client with ✨automatic type generation✨! 🧘‍♀️ GraphQL Yoga - server 💜 URQL - client 🎉 gql.tada - type generation ☁️ EAS Hosting - for API & web deployments

Kadi Kraman 💚

17,462 görüntüleme • 10 ay önce

Your AI stack just stopped being closed. 🔓 TanStack AI now speaks AG-UI client-to-server. - The same client hits any AG-UI server. - Any AG-UI client hits a TanStack server. Zero breaking changes. Migration guide in the tweet below 👇

Your AI stack just stopped being closed. 🔓 TanStack AI now speaks AG-UI client-to-server. - The same client hits any AG-UI server. - Any AG-UI client hits a TanStack server. Zero breaking changes. Migration guide in the tweet below 👇

TANSTACK

78,662 görüntüleme • 19 gün önce

🧵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! 🖥️

🧵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 görüntüleme • 1 yıl önce

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.

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 görüntüleme • 2 yıl önce

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Are React Server Components web-only or can they be used anywhere? What would it look like if @Expo added React Server Components for native iOS and Android platforms... 🧵 Find out now ↓

Evan Bacon 🥓

233,085 görüntüleme • 3 yıl önce

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

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 görüntüleme • 1 yıl önce

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,009 görüntüleme • 1 yıl önce

How it feels joining VC in a small discord server with 6 people.

How it feels joining VC in a small discord server with 6 people.

Violet, Venerate 👑💌

252,384 görüntüleme • 2 ay önce

is now both MCP server creator and MCP server tester (client). You can now immediately test the generated MCP server from within MCPify itself. Using Cloudflare Developers agents-sdk to do this automatically.

is now both MCP server creator and MCP server tester (client). You can now immediately test the generated MCP server from within MCPify itself. Using Cloudflare Developers agents-sdk to do this automatically.

Bhanu Teja P

27,747 görüntüleme • 1 yıl önce