Загрузка видео...

Не удалось загрузить видео

На главную

Client/Server composition with server components feels illegal 😅

69,150 просмотров • 2 лет назад •via X (Twitter)

Комментарии: 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!

Похожие видео

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 лет назад