Nextjs 中的客户端与服务器组件

在此版本的 next.js 中，我们将探讨什么是客户端和服务器组件、它们的差异、何时使用每个组件，并提供实际示例来帮助您在项目中实现它们。

next.js 中的客户端和服务器组件是什么？

在 next.js 中，客户端组件 和 服务器组件 之间有明显的区别。这种分离使您能够更好地决定在何处以及如何处理代码，从而直接影响性能和用户体验。

客户端组件

客户端组件在浏览器中运行，允许交互和访问浏览器 api（如窗口或文档）。它们非常适合管理应用程序的动态界面和响应用户操作。

主要特点：

• 在浏览器（客户端）中运行。
• 可以访问 usestate 或 useeffect 等钩子。
• 用于处理动态交互，例如表单或按钮。
• 当您需要快速响应用户操作时必不可少。

客户端组件示例：

'use client'; // indicates that this component runs on the client

import { usestate } from 'react';

export default function clientcomponent() {
  const [count, setcount] = usestate(0);

  return (
    <div>
      <h1>client-side counter</h1>
      <p>the count value is: {count}</p>
      <button onclick="{()"> setcount(count + 1)}&gt;increment</button>
    </div>
  );
}

这个经典示例是一个允许用户直接与页面交互的计数器。 “使用客户端”；指令告诉 next.js 该组件应该在浏览器中执行。

服务器组件

服务器组件是 next.js 架构中的一项新功能。这些组件在服务器上进行处理，并将已呈现的 html 发送到浏览器。这减少了到达客户端的 javascript 数量，从而加快了初始页面加载速度。

主要特点：

• 在服务器上渲染。
• 无权访问浏览器 api（如 window 或 document），也无权访问 react hook（如 usestate）。
• 可以直接与数据库或外部api交互。
• 通过向客户端发送 html 而不是 javascript 来优化性能。

服务器组件示例：

export default async function servercomponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>data from the server</h1>
      <p>{data.message}</p>
    </div>
  );
}

在此示例中，组件在服务器上呈现，从 api 检索数据，然后返回呈现的 html。这意味着数据获取逻辑不会到达客户端，从而提高了性能。

next.js 中的新功能

next.js 改进了服务器和客户端组件的交互方式。以下是一些最显着的改进：

1. 默认的服务器组件

组件现在默认为服务器组件。这意味着您的应用程序会通过向浏览器发送更少的 javascript 来自动优化，除非您明确需要 客户端组件。

2. 优化流媒体

流允许组件分部分加载。这对于大型或数据量大的页面非常有用，因为页面的各个部分可以在准备就绪时加载，而无需等待所有内容可用。

3. 精细控制

next.js 可以更轻松地决定组件是在服务器上运行还是在客户端上运行，让您更好地控制如何优化应用程序。

4. 改善水分

hydration 是将服务器发送的静态 html 转换为客户端上的交互式页面的过程。借助 next.js，水合作用更加高效且更具选择性，仅在绝对必要时进行。

何时使用客户端组件与服务器组件

在以下情况下使用客户端组件：

1. 用户交互：当您需要处理实时响应的表单或按钮等交互时。
2. 状态管理：非常适合管理动态变化的本地状态，例如购物车。
3. 动画和视觉效果：依赖根据用户交互更新的动画或效果时。

在以下情况下使用服务器组件：

1. 数据库查询：当您需要在显示内容之前从数据库获取数据时。
2. 静态内容：内容不经常更改且不需要交互性时的理想选择。
3. seo 改进：搜索引擎更容易访问服务器渲染的内容，从而增强 seo。

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

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) =&gt; (
          <li key="{product.id}">{product.name}</li>
        ))}
      </ul>
</div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    <div>
      <input type="text" value="{search}" onchange="{(e)"> setSearch(e.target.value)}
        placeholder="Search product"
      /&gt;
      <p>Searching for: {search}</p>
    </div>
  );
}

在此示例中，服务器呈现产品列表并将其发送到客户端，而搜索组件在客户端进行交互和管理。

结论

next.js 代表了我们开发 web 应用程序、优化性能和用户体验的转折点。高效使用服务器组件和客户端组件允许您以更轻的初始负载构建快速、动态的应用程序。

在服务器组件和客户端组件之间正确选择对于充分利用框架的功能至关重要。有了这些新的改进，您可以更轻松地做出明智的决策并创建不仅快速而且具有交互性和可扩展性的应用程序。