Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

35,196 subscribers

69,150 views • 2 years ago •via X (Twitter)

Science & Technology Comedy

Anya Rossi• Live Now

Private livecam show

10 Comments

Savva Mikhalevski2 years ago

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 ⚡️2 years ago

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 Sidorenko2 years ago

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 Afes2 years ago

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

Alex Sidorenko2 years ago

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.

Abdulrahman2 years ago

It’s legal though 😂

Fredkisss is on 🦋 blue sky 🦋2 years ago

This is actually incredible 🤯

Kofi Bamfo Quaicoe2 years ago

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

Alex Sidorenko2 years ago

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

Salik Jamal2 years ago

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

Related Videos

"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 views • 1 year ago

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 views • 2 years ago

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

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

Alex Sidorenko

208,520 views • 2 years ago

Pagination in Next.js 13 with server components

Pagination in Next.js 13 with server components

Alex Sidorenko

140,144 views • 2 years ago

Day 8: React Server Components

Day 8: React Server Components

srgm

16,570 views • 11 months ago

Moving data fetching between client and server with SWR

Moving data fetching between client and server with SWR

Alex Sidorenko

33,430 views • 1 year ago

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 views • 4 months ago

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 views • 1 year ago

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 views • 2 years ago

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 views • 10 months ago

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 views • 20 days ago

🧵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 views • 1 year ago

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 views • 2 years ago

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 views • 3 years ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 2 months ago

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 views • 1 year ago