Nextjs 中的服务器组件与客户端组件何时以及如何使用它们

碧海醫心

发布时间：2024-10-24 15:51:01

1103人浏览过

来源于dev.to

转载

nextjs 中的服务器组件与客户端组件何时以及如何使用它们

next.js 13 引入了 react server components，使开发人员能够选择渲染组件的位置和方式——无论是在服务器上以提高性能，还是在客户端上以实现交互性。这种灵活性使我们能够构建兼具速度和动态功能的应用程序。

在本文中，我们不仅将探讨基础知识，还将深入探讨如何在客户端组件中使用服务器组件——这是构建动态、高效的应用程序时的常见需求。

了解服务器组件

服务器组件完全在服务器上呈现，不需要任何客户端 javascript。它们非常适合静态内容，例如页眉、页脚，甚至不需要用户交互的数据驱动组件。

示例：简单服务器组件

// app/components/header.js
export default function header() {
  return (
    <header>
      <h1>my static header</h1>
    </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 (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

此 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 (
    <div>
      <input
        type="text"
        value={searchterm}
        onchange={(e) => setsearchterm(e.target.value)}
        placeholder="search..."
      />
      <p>searching for: {searchterm}</p>
    </div>
  );
}

searchbar 是交互式的，因此它需要是一个客户端组件。您只能在客户端组件中使用 usestate 钩子和其他 react 钩子。

您可能有一个组合服务器和客户端组件的用例，所以我们接下来讨论如何做到这一点：

组合服务器和客户端组件

next.js 13 的核心优势是能够组合服务器和客户端组件。最佳实践是默认使用服务器组件，并将客户端组件尽可能深入地推送到组件树中。

示例：组合服务器和客户端组件

// app/layout.js
import searchbar from './components/searchbar';

export default function layout({ children }) {
  return (
    <div>
      <header>my blog</header>
      <searchbar />  {/* client component for interactivity */}
      {children}
    </div>
  );
}

searchbar 组件处理客户端交互性，而布局的其余部分则由服务器渲染，从而在性能和交互性之间提供平衡。

相反，您可能有一个在客户端组件内使用服务器组件的用例。让我们看看如何做到这一点。

如何在客户端组件中使用服务器组件

重要的是要了解服务器组件可以嵌套在客户端组件中，但不能直接导入到其中。要在客户端组件中包含服务器组件，请将其作为子组件或 prop 传递，以避免打破两者之间的边界。

示例：将服务器组件传递给客户端组件

这是一个真实的示例，其中服务器组件作为子组件传递给客户端组件：

// app/components/profile.js (server component)
export default function profile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>email: {user.email}</p>
    </div>
  );
}

// app/components/dashboard.js (client component)
'use client';

import { usestate } from 'react';

export default function dashboard({ children }) {
  const [showprofile, setshowprofile] = usestate(false);

  return (
    <div>
      <button onclick={() => setshowprofile(!showprofile)}>
        {showprofile ? 'hide profile' : 'show profile'}
      </button>

      {showprofile && <div>{children}</div>} {/* server component passed as children */}
    </div>
  );
}

// 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 (
    <div>
      <dashboard>
        <profile user={user} />  {/* passing the server component to client */}
      </dashboard>
    </div>
  );
}

在上面的例子中：

Amazon Nova

亚马逊云科技（AWS）推出的一系列生成式AI基础模型

下载

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 (
    <carousel {...settings}>
      <div><h3>slide 1</h3></div>
      <div><h3>slide 2</h3></div>
    </carousel>
  );
}

// app/page.js
import mycarousel from './components/carousel';

export default function page() {
  return (
    <div>
      <h1>welcome to the app</h1>
      <mycarousel />
    </div>
  );
}

通过将第三方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 (
    <div>
      <h1>Welcome to the App</h1>
      <UserCard user={user} />  {/* Passing serializable data to client component */}
    </div>
  );
}

// app/components/UserCard.js (Client Component)
'use client';

export default function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

usercard 客户端组件现在可以动态呈现从服务器组件传递的数据，同时确保所有内容保持可序列化，从而顺利通过服务器-客户端边界。

总而言之，用最佳实践来结束这一点将会很有趣。让我们继续下一步：