当前位置：首页 > 文章列表 > 文章 > 前端 > Nextjs 中的客户端与服务器组件

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

来源：dev.to 2024-09-20 16:34:03 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《Nextjs 中的客户端与服务器组件》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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)}>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，水合作用更加高效且更具选择性，仅在绝对必要时进行。

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

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

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

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

数据库查询：当您需要在显示内容之前从数据库获取数据时。
静态内容：内容不经常更改且不需要交互性时的理想选择。
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) => (
          <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>
      &lt;input
        type=&quot;text&quot;
        value={search}
        onChange={(e) =&gt; setSearch(e.target.value)}
        placeholder="Search product"
      />
      <p>Searching for: {search}</p>
    </div>
  );
}

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