next.js 13 引入了 react server components，使开发人员能够选择渲染组件的位置和方式——无论是在服务器上以提高性能，还是在客户端上以实现交互性。这种灵活性使我们能够构建兼具速度和动态功能的应用程序。
在本文中，我们不仅将探讨基础知识，还将深入探讨如何在客户端组件中使用服务器组件——这是构建动态、高效的应用程序时的常见需求。
了解服务器组件
服务器组件完全在服务器上呈现，不需要任何客户端 javascript。它们非常适合静态内容，例如页眉、页脚，甚至不需要用户交互的数据驱动组件。
示例：简单服务器组件
// app/components/header.jsexport default function header() { return ( my static header
);}
登录后复制
该组件在服务器上呈现，不涉及任何客户端交互，这意味着它使用更少的 javascript 加载速度更快。
服务器组件的优点
减少 javascript 有效负载：服务器组件减少发送到浏览器的 javascript 量。改进的数据获取：服务器组件可以获取更接近数据库的数据，从而减少网络延迟。
在服务器组件中获取数据
// app/components/postlist.jsexport default async function postlist() { const res = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await res.json(); return ( - {posts.slice(0, 5).map((post) => (
- {post.title} ))}
登录后复制
此 postlist 组件在服务器上获取数据并将预渲染的 html 发送到客户端，确保更快的加载时间。
何时使用客户端组件
当您需要交互性（例如表单输入、事件侦听器或动态内容）时，客户端组件至关重要。这些组件在客户端使用 javascript 来处理用户交互。
示例：用于交互的客户端组件
// app/components/searchbar.js'use client'; // this makes the component a client componentimport { usestate } from 'react';export default function searchbar() { const [searchterm, setsearchterm] = usestate(''); return ( setsearchterm(e.target.value)} placeholder="search..." /> searching for: {searchterm}
);}
登录后复制
searchbar 是交互式的，因此它需要是一个客户端组件。您只能在客户端组件中使用 usestate 钩子和其他 react 钩子。
您可能有一个组合服务器和客户端组件的用例，所以我们接下来讨论如何做到这一点：
组合服务器和客户端组件
next.js 13 的核心优势是能够组合服务器和客户端组件。最佳实践是默认使用服务器组件，并将客户端组件尽可能深入地推送到组件树中。
示例：组合服务器和客户端组件
// app/layout.jsimport searchbar from './components/searchbar';export default function layout({ children }) { return ( my blog {/* client component for interactivity */} {children} );}
登录后复制
searchbar 组件处理客户端交互性，而布局的其余部分则由服务器渲染，从而在性能和交互性之间提供平衡。
相反，您可能有一个在客户端组件内使用服务器组件的用例。让我们看看如何做到这一点。
如何在客户端组件中使用服务器组件
重要的是要了解服务器组件可以嵌套在客户端组件中，但不能直接导入到其中。要在客户端组件中包含服务器组件，请将其作为子组件或 prop 传递，以避免打破两者之间的边界。
示例：将服务器组件传递给客户端组件
这是一个真实的示例，其中服务器组件作为子组件传递给客户端组件：
// app/components/profile.js (server component)export default function profile({ user }) { return ( {user.name}
email: {user.email}
);}// app/components/dashboard.js (client component)'use client';import { usestate } from 'react';export default function dashboard({ children }) { const [showprofile, setshowprofile] = usestate(false); return ( {showprofile && {children}} {/* server component passed as children */} );}// app/page.js (main page using both components)import profile from './components/profile';import dashboard from './components/dashboard';export default async function page() { const user = { name: 'john doe', email: 'john@example.com' }; // static example return ( {/* passing the server component to client */} );}
登录后复制
在上面的例子中：
profile 是一个服务器组件，用于获取数据或显示静态内容。仪表板是处理交互的客户端组件（显示/隐藏配置文件）。profile 服务器组件作为子组件传递给仪表板客户端组件。
此模式允许您利用服务器渲染的优势（更少的 javascript，提高性能），同时仍然具有客户端交互性。
第三方库和客户端组件
许多第三方库（例如身份验证提供程序或 ui 组件）都依赖于 react hooks，这些钩子只能在客户端组件中使用。以下是如何通过将第三方库包装在客户端组件中来解决该限制：
示例：使用第三方轮播
// app/components/carousel.js'use client';import carousel from 'react-slick';export default function mycarousel() { const settings = { dots: true, infinite: true }; return ( slide 1
slide 2
);}// app/page.jsimport mycarousel from './components/carousel';export default function page() { return ( welcome to the app
);}
登录后复制
通过将第三方react-slick轮播包装在客户端组件中，我们可以在服务器渲染的页面中使用它，同时仍然访问交互性等客户端功能。
处理服务器和客户端组件之间的 props
在服务器和客户端组件之间传递数据时，道具必须是可序列化的（例如字符串、数字、布尔值）。无法传递函数或类实例等复杂对象。
示例：将数据从服务器传递到客户端
// app/page.js (Server Component)import UserCard from './components/UserCard';export default async function Page() { const user = { name: 'Jane Doe', age: 30 }; // Simple serializable data return ( Welcome to the App
{/* Passing serializable data to client component */} );}// app/components/UserCard.js (Client Component)'use client';export default function UserCard({ user }) { return ( {user.name}
Age: {user.age}
);}
登录后复制
usercard 客户端组件现在可以动态呈现从服务器组件传递的数据，同时确保所有内容保持可序列化，从而顺利通过服务器-客户端边界。
总而言之，用最佳实践来结束这一点将会很有趣。让我们继续下一步：
服务器和客户端组件组合的最佳实践
以下是一些有效组合服务器和客户端组件的技巧：
默认为服务器组件：尽可能对静态或数据驱动内容使用服务器组件，以减少 javascript 负载并提高性能。
使用客户端组件进行交互：仅在需要用户交互或浏览器特定 api 的情况下使用客户端组件。
将客户端组件移至树下：将客户端组件尽可能深地推入组件树中。这允许您的应用程序的更多内容在服务器上呈现，从而提高性能。
将服务器组件作为子组件传递：如果需要在客户端组件中使用服务器组件，请将其作为子组件或 prop 传递，而不是直接导入它。
结束语：在性能和交互性之间取得平衡
使用 next.js 13，您可以灵活地在服务器和客户端上渲染组件。通过默认使用用于静态内容的服务器组件和用于交互的客户端组件，并通过仔细管理两者之间的边界，您可以构建既快速又动态的应用程序。
通过遵循此处的模式和示例（例如将服务器组件传递到客户端组件并精心组合它们），您将能够利用 next.js 13 的全部功能来创建高性能的交互式 web 应用程序。
快乐编码
我是迈克尔。
以上就是Nextjs 中的服务器组件与客户端组件 何时以及如何使用它们的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2662433.html
