Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Client/Server composition with server components feels illegal 😅

asidorenko_'s profile picture

Alex Sidorenko

35,196 subscribers

69,150 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & TechnologieComedy
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Savva Mikhalevski
Savva Mikhalevskivor 2 Jahren

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

Profilbild von jarindr.eth | zentry ⚡️
jarindr.eth | zentry ⚡️vor 2 Jahren

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"

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

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

Profilbild von Eric Afes
Eric Afesvor 2 Jahren

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

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

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.

Profilbild von Abdulrahman
Abdulrahmanvor 2 Jahren

It’s legal though 😂

Profilbild von Fredkisss is on 🦋 blue sky 🦋
Fredkisss is on 🦋 blue sky 🦋vor 2 Jahren

This is actually incredible 🤯

Profilbild von Kofi Bamfo Quaicoe
Kofi Bamfo Quaicoevor 2 Jahren

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

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

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

Profilbild von Salik Jamal
Salik Jamalvor 2 Jahren

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

Ähnliche Videos

"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

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

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

Alex Sidorenko

148,146 Aufrufe • vor 2 Jahren

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

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

Alex Sidorenko

208,520 Aufrufe • vor 2 Jahren

Pagination in Next.js 13 with server components
1:19

Pagination in Next.js 13 with server components

Alex Sidorenko

140,144 Aufrufe • vor 2 Jahren

Day 8: React Server Components
4:53

Day 8: React Server Components

srgm

16,570 Aufrufe • vor 11 Monaten

Moving data fetching between client and server with SWR
0:41

Moving data fetching between client and server with SWR

Alex Sidorenko

33,430 Aufrufe • vor 1 Jahr

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

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

David Hill

64,271 Aufrufe • vor 4 Monaten

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

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

Alex Sidorenko

36,533 Aufrufe • vor 1 Jahr

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:
0:32

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 Aufrufe • vor 2 Jahren

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
0:25

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 Aufrufe • vor 10 Monaten

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 👇
0:30

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 Aufrufe • vor 19 Tagen

🧵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

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

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 ↓
6:35

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 Aufrufe • vor 3 Jahren

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

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?
1:25

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 Aufrufe • vor 1 Jahr

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

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

Violet, Venerate 👑💌

252,384 Aufrufe • vor 2 Monaten

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.
0:44

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 Aufrufe • vor 1 Jahr