正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

35,196 subscribers

69,150 次观看 • 2 年前 •via X (Twitter)

科学技术喜剧

Anya Rossi• Live Now

Private livecam show

10 条评论

Savva Mikhalevski 的头像

Savva Mikhalevski2 年前

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 ⚡️ 的头像

jarindr.eth | zentry ⚡️2 年前

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 的头像

Alex Sidorenko2 年前

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 的头像

Eric Afes2 年前

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

Alex Sidorenko 的头像

Alex Sidorenko2 年前

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 的头像

Abdulrahman2 年前

It’s legal though 😂

Fredkisss is on 🦋 blue sky 🦋 的头像

Fredkisss is on 🦋 blue sky 🦋2 年前

This is actually incredible 🤯

Kofi Bamfo Quaicoe 的头像

Kofi Bamfo Quaicoe2 年前

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

Alex Sidorenko 的头像

Alex Sidorenko2 年前

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

Salik Jamal 的头像

Salik Jamal2 年前

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

相关视频

"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 次观看 • 1 年前

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 次观看 • 2 年前

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

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

Alex Sidorenko

208,520 次观看 • 2 年前

Pagination in Next.js 13 with server components

Pagination in Next.js 13 with server components

Alex Sidorenko

140,144 次观看 • 2 年前

Day 8: React Server Components

Day 8: React Server Components

srgm

16,570 次观看 • 11 个月前

Moving data fetching between client and server with SWR

Moving data fetching between client and server with SWR

Alex Sidorenko

33,430 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 10 个月前

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 次观看 • 21 天前

🧵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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 个月前

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 次观看 • 1 年前