Next.js 中的服务器组件与客户端组件何时以及如何使用它们-js教程-PHP中文网

Server vs. Client Components in Next.js When and How to Use Them

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

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