Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

asidorenko_'s profile picture

Alex Sidorenko

35,219 subscribers

148,146 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von vt305
vt305vor 2 Jahren

Great post! One Q: If my client component uses useSWR, is it possible to use a server component to avoid exposing my bearer token to the client? From the docs it seems useSWR is only available in client components

Profilbild von Matt
Mattvor 2 Jahren

Since the latest release I noticed they’d made some huge performance improvements on moments. I’ve mostly always used my own time ago and date functions but might have to start using it again

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

Nice! The beauty of RSC is that it eliminates the concern of the client bundle size. It doesn't matter if the library is 2kb or 300kb if it stays on the server. So even if moment stayed large, it would be perfectly fine to use it on the server.

Profilbild von Viktor Atanasov
Viktor Atanasovvor 2 Jahren

This is an extremely well-made video! Super succinct and straight to the point. Love it!

Profilbild von Yadiel 🦖
Yadiel 🦖vor 2 Jahren

I think it's interesting that there's not much buzz around the fact that RSCs allow you to use "heavy" dependencies without increasing bundle size. Even though they were literally announced as "Zero-Bundle-Size React Server Components," it seems to be flying under the radar. Don't you think?

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

Yep. The common notion is that "RSC, generally, makes client bundle smaller," not "with RSC, you can safely pick heavy dependencies." The ideas are similar, but this particular angle is often under-appreciated.

Profilbild von Adil - medusa/acc - oss/acc
Adil - medusa/acc - oss/accvor 2 Jahren

Alex hit our brains again, thanks for this one

Profilbild von Hacksore
Hacksorevor 2 Jahren

Worth a follow up on how server actions fit in the mix but this is a banger tweet as always @t3dotgg 👆👆👆

Profilbild von Martin
Martinvor 2 Jahren

Are you doing that with Keynote? Great content and presentation, by the way.

Profilbild von Alex Sidorenko
Alex Sidorenkovor 2 Jahren

Yep, Keynote. Thanks

Ähnliche Videos

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

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

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

Next.js security tip: Use "server only" for the code that should never be exposed to the client.
0:29

Next.js security tip: Use "server only" for the code that should never be exposed to the client.

Alex Sidorenko

109,311 Aufrufe • vor 1 Jahr

Server actions vs API routes in Next.js
1:43

Server actions vs API routes in Next.js

Alex Sidorenko

59,223 Aufrufe • vor 1 Jahr

Infinite scroll in Next.js 13 with server actions
1:42

Infinite scroll in Next.js 13 with server actions

Alex Sidorenko

166,417 Aufrufe • vor 2 Jahren

Client/Server composition with server components feels illegal 😅
1:01

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,150 Aufrufe • vor 2 Jahren

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!
45:12

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!

Lee Robinson

568,120 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

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

How to use Next.js metadata if the page is a client component
0:33

How to use Next.js metadata if the page is a client component

Alex Sidorenko

91,579 Aufrufe • vor 1 Jahr

"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

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.
0:23

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

Ryan Toronto

378,375 Aufrufe • vor 3 Jahren

How to recover from a server component error in Next.js
0:34

How to recover from a server component error in Next.js

Alex Sidorenko

67,557 Aufrufe • vor 1 Jahr

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨
0:26

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,236 Aufrufe • vor 7 Monaten

Next.js: Authentication ※ Best practices for Server Components, Server Actions, and Middleware ※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects Also, aside from headshots, this video is entirely built in React 🤯
12:13

Next.js: Authentication ※ Best practices for Server Components, Server Actions, and Middleware ※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects Also, aside from headshots, this video is entirely built in React 🤯

Delba

116,318 Aufrufe • vor 2 Jahren

Server-side form validation in Next.js
1:33

Server-side form validation in Next.js

Alex Sidorenko

72,160 Aufrufe • vor 2 Jahren

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.
0:34

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,429 Aufrufe • vor 2 Jahren

Upload a file with server action in Next.js
0:59

Upload a file with server action in Next.js

Alex Sidorenko

83,919 Aufrufe • vor 2 Jahren