正在加载视频...

视频加载失败

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

148,146 次观看 • 2 年前 •via X (Twitter)

10 条评论

vt305 的头像
vt3052 年前

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

Matt 的头像
Matt2 年前

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

Alex Sidorenko 的头像
Alex Sidorenko2 年前

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.

Viktor Atanasov 的头像
Viktor Atanasov2 年前

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

Yadiel 🦖 的头像
Yadiel 🦖2 年前

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?

Alex Sidorenko 的头像
Alex Sidorenko2 年前

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.

Adil - medusa/acc - oss/acc 的头像
Adil - medusa/acc - oss/acc2 年前

Alex hit our brains again, thanks for this one

Hacksore 的头像
Hacksore2 年前

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

Martin 的头像
Martin2 年前

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

Alex Sidorenko 的头像
Alex Sidorenko2 年前

Yep, Keynote. Thanks

相关视频

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 年前