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

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/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

在上面的例子中：

• Profile 是一个服务器组件，用于获取数据或显示静态内容。
• 仪表板是处理交互的客户端组件（显示/隐藏配置文件）。
• Profile 服务器组件作为子组件传递给仪表板客户端组件。

此模式允许您利用服务器渲染的优势（更少的 JavaScript，提高性能），同时仍然具有客户端交互性。

第三方库和客户端组件

许多第三方库（例如身份验证提供程序或 UI 组件）都依赖于 React hooks，这些钩子只能在客户端组件中使用。以下是如何通过将第三方库包装在客户端组件中来解决该限制：

示例：使用第三方轮播

// 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>
  );
}

通过将第三方react-slick轮播包装在客户端组件中，我们可以在服务器渲染的页面中使用它，同时仍然访问交互性等客户端功能。

处理服务器和客户端组件之间的 props

在服务器和客户端组件之间传递数据时，道具必须是可序列化的（例如字符串、数字、布尔值）。无法传递函数或类实例等复杂对象。

示例：将数据从服务器传递到客户端

// 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>
  );
}

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

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

服务器和客户端组件组合的最佳实践

以下是一些有效组合服务器和客户端组件的技巧：

1. 默认为服务器组件：尽可能对静态或数据驱动内容使用服务器组件，以减少 JavaScript 负载并提高性能。

2. 使用客户端组件进行交互：仅在需要用户交互或特定于浏览器的 API 时使用客户端组件。

3. 将客户端组件移至树下：将客户端组件尽可能深地推入组件树中。这允许您的应用程序的更多内容在服务器上呈现，从而提高性能。

4. 将服务器组件作为子组件传递：如果需要在客户端组件中使用服务器组件，请将其作为子组件或 prop 传递，而不是直接导入它。

结语：在性能和交互性之间取得平衡

使用 Next.js 13，您可以灵活地在服务器和客户端上渲染组件。通过默认使用用于静态内容的服务器组件和用于交互的客户端组件，并通过仔细管理两者之间的边界，您可以构建既快速又动态的应用程序。

通过遵循此处的模式和示例（例如将服务器组件传递到客户端组件并精心组合它们），您将能够利用 Next.js 13 的全部功能来创建高性能的交互式 Web 应用程序。

快乐编码
我是迈克尔。

以上是Next.js 中的服务器组件与客户端组件 何时以及如何使用它们的详细内容。更多信息请关注PHP中文网其他相关文章！