next.js 13 引入了 react server components，使开发人员能够选择渲染组件的位置和方式——无论是在服务器上以提高性能，还是在客户端上以实现交互性。这种灵活性使我们能够构建兼具速度和动态功能的应用程序。
在本文中，我们不仅将探讨基础知识，还将深入探讨如何在客户端组件中使用服务器组件——这是构建动态、高效的应用程序时的常见需求。
了解服务器组件
服务器组件完全在服务器上呈现，不需要任何客户端 javascript。它们非常适合静态内容，例如页眉、页脚，甚至不需要用户交互的数据驱动组件。
示例：简单服务器组件
// app/components/header.js
export default function header() {
return (
my static header
);
}
该组件在服务器上呈现，不涉及任何客户端交互，这意味着它使用更少的 javascript 加载速度更快。
服务器组件的优点
- 减少 javascript 有效负载：服务器组件减少发送到浏览器的 javascript 量。
- 改进的数据获取：服务器组件可以获取更接近数据库的数据，从而减少网络延迟。
在服务器组件中获取数据
// app/components/postlist.js
export 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 component
import { 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.js
import searchbar from './components/searchbar';
export default function layout({ children }) {
return (
my blog
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 (
);
}
在上面的例子中：
Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！
- 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.js
import 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
{user.name}
Age: {user.age}
);
}
usercard 客户端组件现在可以动态呈现从服务器组件传递的数据，同时确保所有内容保持可序列化，从而顺利通过服务器-客户端边界。
总而言之，用最佳实践来结束这一点将会很有趣。让我们继续下一步：
服务器和客户端组件组合的最佳实践
以下是一些有效组合服务器和客户端组件的技巧：
默认为服务器组件：尽可能对静态或数据驱动内容使用服务器组件，以减少 javascript 负载并提高性能。
使用客户端组件进行交互：仅在需要用户交互或浏览器特定 api 的情况下使用客户端组件。
将客户端组件移至树下：将客户端组件尽可能深地推入组件树中。这允许您的应用程序的更多内容在服务器上呈现，从而提高性能。
将服务器组件作为子组件传递：如果需要在客户端组件中使用服务器组件，请将其作为子组件或 prop 传递，而不是直接导入它。
结束语：在性能和交互性之间取得平衡
使用 next.js 13，您可以灵活地在服务器和客户端上渲染组件。通过默认使用用于静态内容的服务器组件和用于交互的客户端组件，并通过仔细管理两者之间的边界，您可以构建既快速又动态的应用程序。
通过遵循此处的模式和示例（例如将服务器组件传递到客户端组件并精心组合它们），您将能够利用 next.js 13 的全部功能来创建高性能的交互式 web 应用程序。
快乐编码
我是迈克尔。
