Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

You can now dynamically control filter, sort, and limit settings on Collection lists — all through component properties (including a new Number prop type 🙌). Here’s what this means for your workflow: ✨ Easily reuse the same Collection list component in multiple contexts — with different content 🔧 Marketers... show more

Webflow

157,841 subscribers

13,273 Aufrufe • vor 1 Jahr •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von DANN©

DANN©vor 1 Jahr

Another epic update!

Profilbild von Qodo

Qodovor 1 Jahr

Fewer bugs, more shipping. Qodo’s Agentic AI handles testing, reviews, and code generation—so you can focus on building.

Profilbild von Prax Cruz

Prax Cruzvor 1 Jahr

Also, when are you going to build a simple image gallery that does not require a lightbox and can be placed on any page. This seems like something people have been calling for, for a long time.

Profilbild von Tom Grabski

Tom Grabskivor 1 Jahr

How can I add search fields and filters to create a search bar like on real estate website? 👀 Is it possible already without using external tools like this from Finsweet?

Profilbild von Lien Swollef

Lien Swollefvor 1 Jahr

Excellent! This is exactly the kind of updates I've been waiting for. Looking forward to seeing what else is planned in the near future.

Profilbild von Mahesh Prajapati

Mahesh Prajapativor 1 Jahr

Webflow team crushing it again! 👏

Profilbild von Prax Cruz

Prax Cruzvor 1 Jahr

This has been a long time coming.

Profilbild von Mark Fa'amaoni

Mark Fa'amaonivor 1 Jahr

Hmmm. Time to experiment with the navbar!

Profilbild von Marcus

Marcusvor 1 Jahr

I'm glad to see what it means for our workflow

Profilbild von Shane | Building things

Shane | Building thingsvor 1 Jahr

This is OP

Ähnliche Videos

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

Webflow

20,748 Aufrufe • vor 2 Jahren

Component style variants are here! You can now define multiple style options for a single component — like a Button with solid and outline styles, a Card with horizontal and vertical variants, and more 🤯 Read more in the updates post:

Component style variants are here! You can now define multiple style options for a single component — like a Button with solid and outline styles, a Card with horizontal and vertical variants, and more 🤯 Read more in the updates post:

Webflow

19,978 Aufrufe • vor 1 Jahr

Build on-brand sites faster with Libraries! 🎉 Now you can share components and variables across multiple sites in your Workspace, enabling your team to build on-brand experiences quickly and manage updates effortlessly. Learn more: And we're just getting started — stay tuned for more updates at #WebflowConf

Webflow

15,911 Aufrufe • vor 2 Jahren

New to Featured Workflows: Seamless Transitions. Now you can create multiple generations with a single consistent subject interacting with different objects across various scenes and environments. All in a single, easy to use Workflow without the need for complex prompting. Explore the full collection of Featured Workflows or create your own at

New to Featured Workflows: Seamless Transitions. Now you can create multiple generations with a single consistent subject interacting with different objects across various scenes and environments. All in a single, easy to use Workflow without the need for complex prompting. Explore the full collection of Featured Workflows or create your own at

Runway

52,203 Aufrufe • vor 6 Monaten

🚀 Empower your team with component slots! Now, designers can enable team members and clients to arrange components within flexible placeholders, enhancing composability and ensuring brand consistency. Explore the possibilities with slots today:

Webflow

29,434 Aufrufe • vor 2 Jahren

Page templates are *here* — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Page templates are here — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Webflow

33,811 Aufrufe • vor 2 Jahren

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

Webflow

38,743 Aufrufe • vor 5 Monaten

Commenting in Webflow just got a serious glow-up, thanks to some powerful updates built to streamline how you collaborate. Here’s what’s new: 💻 Now, you can enable custom code – like animations and forms – to run in both preview and comment modes, allowing everyone to provide feedback with full context. ⌨️ Review and refine content, right where it lives with on-canvas CMS commenting. ⚡️We’ve partnered with Zapier and Make to allow you to surface Webflow comment activity in tools like Slack, Asana, Jira, Notion, and more! 📝 We released comments APIs and a webhook to allow you to build integrations that connect Webflow comments to other tools. To learn more about these updates check out the blog here:

Commenting in Webflow just got a serious glow-up, thanks to some powerful updates built to streamline how you collaborate. Here’s what’s new: 💻 Now, you can enable custom code – like animations and forms – to run in both preview and comment modes, allowing everyone to provide feedback with full context. ⌨️ Review and refine content, right where it lives with on-canvas CMS commenting. ⚡️We’ve partnered with Zapier and Make to allow you to surface Webflow comment activity in tools like Slack, Asana, Jira, Notion, and more! 📝 We released comments APIs and a webhook to allow you to build integrations that connect Webflow comments to other tools. To learn more about these updates check out the blog here:

Webflow

11,829 Aufrufe • vor 1 Jahr

Introducing The Webflow Way: Your new go-to resource for strategic best practices that go beyond the “how-to” and into the “how-to-do-it-best”. Whether you build for clients or for your own brand, these best practices will help you get the most out of Webflow to deliver high-performing, scalable web experiences. 📘 You’ll find in-depth guidance across six core areas: 1. Design Systems – Ship faster, stay on brand, and scale with ease. 2. CMS – Deliver dynamic, data-driven content at scale. 3. Localization – Create global experiences that connect locally — without compromising speed or quality. 4. SEO – Improve discoverability and drive organic growth. 5. Optimization – Boost conversions and make smarter decisions, faster. 6. Collaboration – Streamline workflows across designers, marketers, and developers. This is the blueprint the world’s top Webflow experts use to ship faster, scale smarter, and deliver world-class digital experiences. Learn more about The Webflow Way here, and tune in to our livestream on September 9th:

Webflow

11,863 Aufrufe • vor 10 Monaten

Public Launch Announcement 📢 🟧 explorer is now live for public You can now browse, search, and filter every bitmap on-chain on Explore by block number, collection, rarity, or type. View full metadata — tx count, block size, traits, owner, child inscriptions all pulled directly from the chain. Visualize ANY bitmap in its original form — now with native 3D rendering 💖 and much more 🟧🟧🟧 Trading 🔜

Public Launch Announcement 📢 🟧 explorer is now live for public You can now browse, search, and filter every bitmap on-chain on Explore by block number, collection, rarity, or type. View full metadata — tx count, block size, traits, owner, child inscriptions all pulled directly from the chain. Visualize ANY bitmap in its original form — now with native 3D rendering 💖 and much more 🟧🟧🟧 Trading 🔜

bitmap.trade

21,126 Aufrufe • vor 3 Monaten

Webflow Cloud is now available to everyone. Back in May, when we announced the private beta of Webflow Cloud, the response was overwhelming. Developers, marketers, and agencies alike were excited by the possibilities. Now, we’re thrilled to share that Webflow Cloud is available to everyone. Webflow Cloud is the newest addition to our Website Experience Platform, enabling you to build and deploy full-stack web applications and dynamic experiences, right alongside your Webflow site, on our native hosting infrastructure powered by Cloudflare. Now, anyone can build: 💻 Full-stack, headless apps and integrations – From AI-powered experiences to complex storefronts 📍 Programmatic SEO at scale – Perfect for local landing pages and long-tail content campaigns 🔧 Custom internal tools and admin interfaces – Think dashboards, CRMs, and more To learn more, visit:

Webflow Cloud is now available to everyone. Back in May, when we announced the private beta of Webflow Cloud, the response was overwhelming. Developers, marketers, and agencies alike were excited by the possibilities. Now, we’re thrilled to share that Webflow Cloud is available to everyone. Webflow Cloud is the newest addition to our Website Experience Platform, enabling you to build and deploy full-stack web applications and dynamic experiences, right alongside your Webflow site, on our native hosting infrastructure powered by Cloudflare. Now, anyone can build: 💻 Full-stack, headless apps and integrations – From AI-powered experiences to complex storefronts 📍 Programmatic SEO at scale – Perfect for local landing pages and long-tail content campaigns 🔧 Custom internal tools and admin interfaces – Think dashboards, CRMs, and more To learn more, visit:

Webflow

21,002 Aufrufe • vor 1 Jahr

In this week's Stability Seconds, we’re getting you up to speed on how to use simple prompting techniques to create more precise images faster by not having to rewrite your prompt. Here’s how: 1️⃣ Use positive and negative prompts: Combine positive prompts to describe what should appear in the image, like “an editorial close-up,” and negative prompts to guide the model away from unwanted elements, such as “low resolution.” 2️⃣ Create prompt journals: When using Stable Image Ultra, try the prompt journal node to store a list of prompts directly into your workflow. This keeps your best prompts in one place, so you can easily reuse them or build on them later. You can find more prompting techniques and start creating with Stable Image Ultra here 👉

In this week's Stability Seconds, we’re getting you up to speed on how to use simple prompting techniques to create more precise images faster by not having to rewrite your prompt. Here’s how: 1️⃣ Use positive and negative prompts: Combine positive prompts to describe what should appear in the image, like “an editorial close-up,” and negative prompts to guide the model away from unwanted elements, such as “low resolution.” 2️⃣ Create prompt journals: When using Stable Image Ultra, try the prompt journal node to store a list of prompts directly into your workflow. This keeps your best prompts in one place, so you can easily reuse them or build on them later. You can find more prompting techniques and start creating with Stable Image Ultra here 👉

Stability AI

14,109 Aufrufe • vor 1 Jahr

Here’s how AI Mode and Google Maps’ Ask Maps can help you find and book the right table at the right restaurant right when you want it. Here’s how: 1️⃣ Describe all your needs — including details about your group size, ideal vibe and time and dietary preferences — in AI Mode in Search or Google Maps’ Ask Maps. 2️⃣ We’ll search across multiple reservation platforms and websites to find real-time availability for options that match your criteria. 3️⃣ From there, Ask Maps and AI Mode will present a curated list of restaurants to choose from with direct links to finalize your bookings through partners like OpenTable or Resy.

Here’s how AI Mode and Google Maps’ Ask Maps can help you find and book the right table at the right restaurant right when you want it. Here’s how: 1️⃣ Describe all your needs — including details about your group size, ideal vibe and time and dietary preferences — in AI Mode in Search or Google Maps’ Ask Maps. 2️⃣ We’ll search across multiple reservation platforms and websites to find real-time availability for options that match your criteria. 3️⃣ From there, Ask Maps and AI Mode will present a curated list of restaurants to choose from with direct links to finalize your bookings through partners like OpenTable or Resy.

Google

114,131 Aufrufe • vor 2 Monaten

🚀 Introducing Queue: A Smarter Way to Build with Replit Agent Today, we’re excited to launch Queue, a powerful new capability designed to enhance your experience with Replit Agent. With Queue, you can submit multiple tasks while your Agent is still working—no more waiting around or breaking your flow. As each task completes, the Agent automatically moves to the next. You can: ✅ Add multiple tasks for the Agent to process in order. ✅ Edit, reorder, or reprioritize messages on the fly. ✅ Attach files and adjust settings—including toggling extended thinking or selecting a different model—per task.

🚀 Introducing Queue: A Smarter Way to Build with Replit Agent Today, we’re excited to launch Queue, a powerful new capability designed to enhance your experience with Replit Agent. With Queue, you can submit multiple tasks while your Agent is still working—no more waiting around or breaking your flow. As each task completes, the Agent automatically moves to the next. You can: ✅ Add multiple tasks for the Agent to process in order. ✅ Edit, reorder, or reprioritize messages on the fly. ✅ Attach files and adjust settings—including toggling extended thinking or selecting a different model—per task.

Replit ⠕

75,576 Aufrufe • vor 1 Jahr

I just inscribed the FILTER module to Termina! You can now SEARCH and FILTER bitmap content and fields, powered by CRAWL and the WORLDTREE data! Go to: Try > filter content bitoshi blockamoto > filter type audio > filter address skynet > filter (type image) (timestamp 2023) > filter help Make sure you have the latest snapshot from WORLDTREE, or have run your own CRAWL and WORLDTREE (warning - these take a long time! I'll be looking into ways to make running these more accessible). Bring your own data: The help menu is your friend here! Please try as much as you can. You can filter single values, or multiple things at the same time with parenthesis. I've found so many inscriptions on Bitmap this way! Please have fun with it, and if you make a new inscription on Bitmap, be sure to run "crawl bitmap [range]" and "worldtree bitmap full [range]" on your district so you can search & filter, and make sure to add it to github via a pull request. This way we can share the latest snapshot data. If you want to build your own dataset, try using CRAWL and WORLDTREE. I warn you though, the CRAWL module especially will take days if you don't have 18 windows open each scanning a range (in which case it will take about 8 hours). The WORLDTREE module takes about 8 hours with just one window open, so probably can accellerate the speed with multiple windows. This is why it's easier to piggyback off the github snapshots, but in the future these scans will be baked into the fabric of the operating system, automatically updated by users exploration and constantly scanning in the background (if turned on). Maybe there's some synergy to be had in this regard with ZmAKin_1981.🟧 extension to make sure we always have latest data. Anyway, that's all for now folks! Please share your findings.

I just inscribed the FILTER module to Termina! You can now SEARCH and FILTER bitmap content and fields, powered by CRAWL and the WORLDTREE data! Go to: Try > filter content bitoshi blockamoto > filter type audio > filter address skynet > filter (type image) (timestamp 2023) > filter help Make sure you have the latest snapshot from WORLDTREE, or have run your own CRAWL and WORLDTREE (warning - these take a long time! I'll be looking into ways to make running these more accessible). Bring your own data: The help menu is your friend here! Please try as much as you can. You can filter single values, or multiple things at the same time with parenthesis. I've found so many inscriptions on Bitmap this way! Please have fun with it, and if you make a new inscription on Bitmap, be sure to run "crawl bitmap [range]" and "worldtree bitmap full [range]" on your district so you can search & filter, and make sure to add it to github via a pull request. This way we can share the latest snapshot data. If you want to build your own dataset, try using CRAWL and WORLDTREE. I warn you though, the CRAWL module especially will take days if you don't have 18 windows open each scanning a range (in which case it will take about 8 hours). The WORLDTREE module takes about 8 hours with just one window open, so probably can accellerate the speed with multiple windows. This is why it's easier to piggyback off the github snapshots, but in the future these scans will be baked into the fabric of the operating system, automatically updated by users exploration and constantly scanning in the background (if turned on). Maybe there's some synergy to be had in this regard with ZmAKin_1981.🟧 extension to make sure we always have latest data. Anyway, that's all for now folks! Please share your findings.

bitoshi blockamoto 🧱 BITMAP 🟧

16,472 Aufrufe • vor 9 Monaten

✨New LangChain Academy Course: Learn to build with LangSmith Agent Builder 🪄 Learn how to build your own agents with LangSmith Agent Builder. Anyone can now build agents for complex daily tasks, without writing code. We built Agent Builder for anyone whose day gets swallowed by routine work. The research, follow-ups, updates, scheduling, and status checks that are essential to your operations, but quickly take over your calendar. Agent Builder is different from traditional workflow automations. You don’t need to map every step, tinker with if-this-then-that branching, or babysit dependencies. You just give it feedback like you would a teammate, and the agent learns using its memory. In this quickstart course, you'll learn how to: - Build an email agent - Understand what agents can do - Improve your agent - Set up triggers and your Agent Inbox Enroll for free ➡️

✨New LangChain Academy Course: Learn to build with LangSmith Agent Builder 🪄 Learn how to build your own agents with LangSmith Agent Builder. Anyone can now build agents for complex daily tasks, without writing code. We built Agent Builder for anyone whose day gets swallowed by routine work. The research, follow-ups, updates, scheduling, and status checks that are essential to your operations, but quickly take over your calendar. Agent Builder is different from traditional workflow automations. You don’t need to map every step, tinker with if-this-then-that branching, or babysit dependencies. You just give it feedback like you would a teammate, and the agent learns using its memory. In this quickstart course, you'll learn how to: - Build an email agent - Understand what agents can do - Improve your agent - Set up triggers and your Agent Inbox Enroll for free ➡️

LangChain

26,513 Aufrufe • vor 6 Monaten

Obsidian 1.11 is now available for desktop and mobile! Mobile: - The interface has been refreshed to improve the editing and reading experience. - Lock Screen, Control Center, and Home Screen widgets let you quickly create a new note, open a specific note, open daily note, open search, or open Obsidian. - When scrolling down in a note, the navigation hides to maximize screen space for reading. - New sidebar navigation for switching sidebar tabs and actions, aligned to the bottom for better ergonomics. - Added double-tap to switch a note from reading mode to editing mode. iOS - Shortcuts to open a note, open daily note, capture to a note. Capture shortcuts allow you to append or prepend text to a note, without opening the Obsidian app. - Siri integration such as "Capture using Obsidian", "Capture to Obsidian", "Open my daily note in Obsidian", "Search in Obsidian". -Searching for Obsidian in Spotlight shows additional actions: New Note, Search, and Daily Note. Android - New widgets: Open Note, New Note, Search, Daily Note, Open Obsidian. You can add multiple widgets of the same type to open different files, or trigger different search queries. - Quick Settings Tile and new shortcuts: Open note, Daily note. Editor - Markdown links are now supported in text and list properties. Internal links are automatically updated when the destination file is moved or renamed. - When text is selected, pasting a URL into the editor will convert the selection into a Markdown link using the URL. Settings - New "Keychain" settings section for storing plugin secrets. A guide for plugin developers is published in our docs. - Added icons to settings sections. - Community Plugins › Automatically check for plugin updates. Obsidian will check for plugin updates in the background every 3 days, or after the app updates. - New setting Files & links › Default file to open. Choose between "Last opened files", "New note", "Specific note", or "Daily note". - The daily note format can be selected from a list of predefined formats. Obsidian URI - New, open, and daily URI actions now support a new paneType param.

Obsidian 1.11 is now available for desktop and mobile! Mobile: - The interface has been refreshed to improve the editing and reading experience. - Lock Screen, Control Center, and Home Screen widgets let you quickly create a new note, open a specific note, open daily note, open search, or open Obsidian. - When scrolling down in a note, the navigation hides to maximize screen space for reading. - New sidebar navigation for switching sidebar tabs and actions, aligned to the bottom for better ergonomics. - Added double-tap to switch a note from reading mode to editing mode. iOS - Shortcuts to open a note, open daily note, capture to a note. Capture shortcuts allow you to append or prepend text to a note, without opening the Obsidian app. - Siri integration such as "Capture using Obsidian", "Capture to Obsidian", "Open my daily note in Obsidian", "Search in Obsidian". -Searching for Obsidian in Spotlight shows additional actions: New Note, Search, and Daily Note. Android - New widgets: Open Note, New Note, Search, Daily Note, Open Obsidian. You can add multiple widgets of the same type to open different files, or trigger different search queries. - Quick Settings Tile and new shortcuts: Open note, Daily note. Editor - Markdown links are now supported in text and list properties. Internal links are automatically updated when the destination file is moved or renamed. - When text is selected, pasting a URL into the editor will convert the selection into a Markdown link using the URL. Settings - New "Keychain" settings section for storing plugin secrets. A guide for plugin developers is published in our docs. - Added icons to settings sections. - Community Plugins › Automatically check for plugin updates. Obsidian will check for plugin updates in the background every 3 days, or after the app updates. - New setting Files & links › Default file to open. Choose between "Last opened files", "New note", "Specific note", or "Daily note". - The daily note format can be selected from a list of predefined formats. Obsidian URI - New, open, and daily URI actions now support a new paneType param.

Obsidian

191,518 Aufrufe • vor 6 Monaten

Meet Veo 3.1 👋 With Veo 3.1, you can generate videos with richer audio, better narrative control, and enhanced realism. This new update also comes with a suite of additional features built for creative control. Including the ability to: — Extend your videos to make them longer (with audio) — Set the first and last frame of your video to control your output (with audio) — Upload multiple ingredient images to craft your scene (with audio) — Add or remove objects directly in your video These features are available in Flow by Google, the Gemini API, and Google Cloud Vertex AI. Veo 3.1 is also available in the Google Gemini. We’re so excited to see what you create!

Meet Veo 3.1 👋 With Veo 3.1, you can generate videos with richer audio, better narrative control, and enhanced realism. This new update also comes with a suite of additional features built for creative control. Including the ability to: — Extend your videos to make them longer (with audio) — Set the first and last frame of your video to control your output (with audio) — Upload multiple ingredient images to craft your scene (with audio) — Add or remove objects directly in your video These features are available in Flow by Google, the Gemini API, and Google Cloud Vertex AI. Veo 3.1 is also available in the Google Gemini. We’re so excited to see what you create!

Google AI

71,238 Aufrufe • vor 9 Monaten

🚨MASSIVE UPDATE ALERT🚨 It’s finally here! PokeDoku Tic Tac Toe is live! Tic Tac Toe is a PvP game mode where you can play random opponents or your friends online. Normal Tic Tac Toe rules just with a PokeDoku twist. This is just the Beta, we are planning to tweak and add much more to this game mode. Any feedback would be much appreciated. One thing to look out for in a future update is a category filter like in Unlimited Mode. Our plan is to add a filter for when you play against your friends so you can customize what categories you’d like to play with. We are super excited to share this game mode with our fans. This took our team a long time to develop and we would love for everyone try it out and let us know what you think! Retweet this post to help us spread the word that PvP PokeDoku is here! 🫡🤝

🚨MASSIVE UPDATE ALERT🚨 It’s finally here! PokeDoku Tic Tac Toe is live! Tic Tac Toe is a PvP game mode where you can play random opponents or your friends online. Normal Tic Tac Toe rules just with a PokeDoku twist. This is just the Beta, we are planning to tweak and add much more to this game mode. Any feedback would be much appreciated. One thing to look out for in a future update is a category filter like in Unlimited Mode. Our plan is to add a filter for when you play against your friends so you can customize what categories you’d like to play with. We are super excited to share this game mode with our fans. This took our team a long time to develop and we would love for everyone try it out and let us know what you think! Retweet this post to help us spread the word that PvP PokeDoku is here! 🫡🤝

PokeDoku

317,056 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.

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