Loading video...

Video Failed to Load

Go Home

How to indicate a server component needs to be rendered dynamically at runtime, when it doesn't use dynamic APIs in Nextjs

asidorenko_'s profile picture

Alex Sidorenko

34,322 subscribers

44,635 views • 9 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.
1:09

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.

Next.js

61,805 views • 4 months ago

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

⚛️ How to use TypeScript type predicates in React to create a more robust, type-safe, and maintainable component. (this pattern is particularly useful when dealing with discriminated unions or when you need to narrow types based on runtime checks)
1:07

⚛️ How to use TypeScript type predicates in React to create a more robust, type-safe, and maintainable component. (this pattern is particularly useful when dealing with discriminated unions or when you need to narrow types based on runtime checks)

George Moller

29,508 views • 1 year ago

I've built a tool that let's you recover your tokens even when your wallet doesn't allow transfers anymore. This is in response to recent attacks where user wallets are rendered unusable. Here is how to use it and how to build something like this yourself 👇
2:18

I've built a tool that let's you recover your tokens even when your wallet doesn't allow transfers anymore. This is in response to recent attacks where user wallets are rendered unusable. Here is how to use it and how to build something like this yourself 👇

Solandy 🎓

101,977 views • 2 years ago

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.
0:38

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

Delba

48,478 views • 1 year ago

Want to make your game worlds more dynamic? Learn how to spawn layouts and generate NavMesh surfaces at runtime with Unity’s AI Navigation package, perfect for procedural or changing environments! See how to use the NavMeshSurface component to easily handle prefab spawning and real-time nav mesh updates during Play mode. Ready to get started? Full tutorial here: #gamedev #unitytips #unity3d #unitylearn
0:44

Want to make your game worlds more dynamic? Learn how to spawn layouts and generate NavMesh surfaces at runtime with Unity’s AI Navigation package, perfect for procedural or changing environments! See how to use the NavMeshSurface component to easily handle prefab spawning and real-time nav mesh updates during Play mode. Ready to get started? Full tutorial here: #gamedev #unitytips #unity3d #unitylearn

Unity for Games

13,995 views • 6 months ago

I built an MCP server for Tiktok Growing an app? Use this to find influencers in any niche and build a UGC machine Free, open-source, and doesn't rely on third-party APIs
0:30

I built an MCP server for Tiktok Growing an app? Use this to find influencers in any niche and build a UGC machine Free, open-source, and doesn't rely on third-party APIs

edgar 🇺🇸/acc

21,508 views • 1 year ago

When it comes to work, @dre_muhammad makes sure it’s what it needs to be, how it needs to be, and why it needs to be. No breaks on break.
0:05

When it comes to work, @dre_muhammad makes sure it’s what it needs to be, how it needs to be, and why it needs to be. No breaks on break.

Jerquaden“G2”Guilford

27,442 views • 2 months ago

Frida JDWP Loader This tool dynamically attaches #Frida to any debuggable Android process over JDWP, enabling runtime instrumentation without root access. Perfect for quick dynamic app analysis
0:53

Frida JDWP Loader This tool dynamically attaches #Frida to any debuggable Android process over JDWP, enabling runtime instrumentation without root access. Perfect for quick dynamic app analysis

Mobile Hacker

23,432 views • 7 months ago

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

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗
1:29

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗

Desi Banks

1,960,918 views • 2 years ago

Introducing Data Binding Artboards! Now you can dynamically load an artboard from a separate Rive file. Swap in avatars, toggle views, A/B test layouts, and load any other type of component from an external Rive file at runtime. Audio on 🔊
0:41

Introducing Data Binding Artboards! Now you can dynamically load an artboard from a separate Rive file. Swap in avatars, toggle views, A/B test layouts, and load any other type of component from an external Rive file at runtime. Audio on 🔊

Rive

17,020 views • 10 months ago

Imagine if every npm package page had a built-in sandbox to test code instantly. I used Cloudflare’s new Dynamic Workers to build exactly that. It bundles packages at runtime in rapid, isolated sandboxes.
0:27

Imagine if every npm package page had a built-in sandbox to test code instantly. I used Cloudflare’s new Dynamic Workers to build exactly that. It bundles packages at runtime in rapid, isolated sandboxes.

Ashley Peacock

33,553 views • 2 months ago

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

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓
0:43

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓

Santiago

39,944 views • 1 year ago

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