当前位置：首页 > news >正文

灵活运用 NextJS 服务端组件与客户端组件

news 来源：原创 2025/6/5 16:19:11

灵活运用 NextJS 服务端组件与客户端组件

Next.js 13 引入了 App Router 后，架构带来了革命性的变化，其中最显著的特性之一就是 **服务端组件(Server Components)**和 客户端组件(Client Components) 的明确区分。这种架构设计让开发者能够更精细地控制应用的性能和功能实现。

本文将深入探讨如何灵活运用这两种组件来构建高效、可维护的 Next.js 应用。

核心区别

服务端组件

在服务器端渲染：组件代码永远不会发送到客户端
无客户端交互性：不能使用 useState、useEffect 等 React Hooks
不具备 window 对象： 不能使用浏览器相关 API
直接访问后端资源：可以直接连接数据库、调用 API 等
默认行为：在 App Router 中，所有组件默认为服务端组件（use server）

客户端组件

在客户端渲染：包含的 JavaScript 会被发送到浏览器
完全交互性：可以使用所有 React Hooks 和浏览器 API
需要显式声明：通过 use client 指令标记

'use client' // 声明为客户端组件import { useState } from 'react'export default function Counter() {const [count, setCount] = useState(0)return (<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>)
}

何时使用

服务端组件

获取数据：直接从数据库或 API 获取数据，无需额外客户端请求

async function UserProfile({ userId }) {const user = await db.users.findUnique({ where: { id: userId } })return (<div><h1>{user.name}</h1><p>{user.bio}</p></div>)
}

访问后端资源：安全地使用环境变量或敏感信息

async function SecretData() {const apiKey = process.env.SECURE_API_KEYconst data = await fetchSecureData(apiKey)return <div>{data}</div>
}

消耗性能的操作：比如在 Excel 导出文件时可以放在服务端组件性能会更好

客户端组件

交互性和状态管理：

'use client'import { useState } from 'react'export default function Accordion() {const [isOpen, setIsOpen] = useState(false)return (<div><button onClick={() => setIsOpen(!isOpen)}>{isOpen ? '隐藏' : '显示'}</button>{isOpen && <div>Content...</div>}</div>)
}

浏览器API访问：

'use client'export default function GeoLocation() {const [position, setPosition] = useState(null)useEffect(() => {navigator.geolocation.getCurrentPosition(pos => {setPosition(pos)})}, [])return <div>Your position: {JSON.stringify(position)}</div>
}

第三方库集成：需要 useEffect 或 DOM 操作的库

'use client'import { useEffect, useRef } from 'react'
import { Chart } from 'chart.js/auto'export default function PieChart({ data }) {const chartRef = useRef(null)useEffect(() => {const chart = new Chart(chartRef.current, {type: 'pie',data: data})return () => chart.destroy()}, [data])return <canvas ref={chartRef} />
}

混合使用

如果我们想让应用具备 SEO 能力，必然要在服务端组件进行渲染，但在某些情况下我们还需要写一些交互，此时又不能使用服务端组件，从而形成了冲突。

就拿导航栏功能举例，我们需要支持 SEO 且实现下拉菜单的交互效果。此时就可以使用混合模式来完成：

我们可以将服务端组件作为容器，用来获取数据，再把获取的数据传递给客户端组件，这样一来客户端组件自然可以完成相应的交互了：

// app/page.tsx - 服务端组件
import Header from './components/Header'async function ServerContainer() {const data = await getData()return (<div><h1>服务器渲染标题</h1><Header list={data} /></div>)
}

// app/components/Header.tsx - 客户端组件
"use client"
async function () => {const [open, setOpen] = useState(false)return (<div>...</div>)
}

解决方案

需要在客户端组件中使用服务端数据

解决方案：通过 props 传递

// 服务端组件
async function ServerParent() {const data = await getData()return <ClientChild data={data} />
}// 客户端组件
'use client'
function ClientChild({ data }) {// 使用数据...
}

服务端组件需要客户端交互

解决方案：提取交互部分到客户端组件

// 服务端组件
function ServerComponent() {return (<div><h1>Static Content</h1><ClientInteractivePart /></div>)
}

共享状态需要在服务端和客户端之间同步

解决方案：使用服务器动作

// 服务端组件
async function ServerForm() {async function handleSubmit(formData) {'use server'// 处理表单提交}return (<form action={handleSubmit}><input name="username" /><button type="submit">Submit</button></form>)
}