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

发布日期： 2024-10-24 阅读量： 作者： 网络

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

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

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

了解服务器组件

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

// app/components/header.js
export default function header() {
  return (
    <header>
      <h1>my static header</h1>
    </header>
  );
}