6.Next.js14 服务器组件和客户端组件

什么是服务器组件和客户端组件

在Next.js 14中，服务器组件和客户端组件的概念是非常重要的。

服务器组件

服务器组件指的是在服务器端渲染的组件。这些组件需要在服务器端进行运算，并且在客户端不能被修改或者交互。服务器组件的主要特点是它们能提供动态的、丰富的、有状态的用户体验，而不需要编写任何JavaScript。它们在服务器端渲染，并将结果发送到浏览器，只有在用户交互产生更新的情况下才需要使用JavaScript。

客户端组件

客户端组件指的是在浏览器（即客户端）中执行的组件。这些组件处理用户交互，并且可以根据需要动态地显示和隐藏元素。客户端组件在浏览器中完全运行，全权处理用户交互，包括处理事件、管理状态、传递数据、修改DOM等等。客户端组件最常见的例子就是React组件。这些组件在服务器上进行预渲染，然后在客户端”唤醒”，使得我们可以添加丰富的互动性。在Next.js中，你可以通过编写use client来声明客户端组件。

客户端组件的预渲染

Next.js 文档指出，“客户端组件在服务器上以 HTML 形式预渲染，以产生更快的初始页面加载。”

访问 /页面并重新加载以加载第一页。检查“网络”选项卡以查看客户端组件在重新加载后是否已预渲染。

可以看到浏览器从服务器接收到预渲染 HTML 的响应。

创建一个客户端组件

我们来创建一个计数器的客户端组件，当用户单击按钮时，该组件会增加计数器。

//app/components/Counter.tsx
import {useState} from "react";

export default function Counter() {
    const [count,setCount] = useState<number>(0)
    const increment = () => {
      setCount((pre) => pre + 1)
    }
    return(
        <>
            <div>Count:{count}</div>
            <button onClick={increment} className="px-2 py-1 rounded-lg bg-blue-600 text-white">Increment</button>
        </>
    )
}

从 app 目录下的 page.tsx 文件导入创建的 Counter 组件。

//app/page.tsx
import Link from "next/link";
import Counter from "@/app/components/Counter";
export default function Home() {
  return (
   <main>
     <Link href="/users">Users</Link>
       <h1>Hello World</h1>
       <Counter />
   </main>
  )
}

更新文件时，我们会发现报了一个错误，原因是useState 它只能在客户端组件中工作。

所以我们设置’use client’使Count组件要是成是客户端组件。

我们也可以删除Counter.tsx 中的’use client’。将app/page.tsx 文件（Counter.tsx 文件的父组件）中设置“use client”。这样也是可以的，但是一般情况下，我们不这样做。

//app/page.tsx
'use client';
import Link from 'next/link';
import Counter from './Counter';

export default function Home() {
//略

将服务器组件与客户端组件一起使用

如果想在客户端组件中使用服务器组件，请使用 props。

我们创建一个名为UserLst.tsx 用户列表的服务端组件。

//app/components/UserLst.tsx
const UserLst = async () => {
    console.log('设置 console.log 以确保它仅在服务器端运行')
  return (
      <ul>
          <li>张三</li>
          <li>李四</li>
          <li>李明</li>
          <li>小花</li>
      </ul>
  )
}
 export default UserLst

在 Counter.tsx 文件中，设置子属性以接收服务器组件。

//app/components/Counter.tsx
'use client'
import React, {useState} from "react";

export default function Counter({children}:{
    children:React.ReactNode
}) {
    const [count,setCount] = useState<number>(0)
    const increment = () => {
      setCount((pre) => pre + 1)
    }
    return(
        <>
            <div>Count:{count}</div>
            <button onClick={increment} className="px-2 py-1 rounded-lg bg-blue-600 text-white">Increment</button>
            {children}
        </>
    )
}

最后，在app目录下的page.tsx文件中，导入UserList组件并将其插入到Counter标签之间。

//app/page.tsx
import Counter from "@/app/components/Counter";
import UserLst from "@/app/components/UserLst";
export default function Home() {
  return (
   <main>
     <Link href="/users">Users</Link>
       <Counter>
           <h2>用户列表</h2>
           <UserLst />
       </Counter>
   </main>
  )
}